請注意：本章節(jié)所有內容只在小程序端起效果。

Taro 可以直接通過 Element#innerHTML 或 Vue 的 v-html 或 React/Nerv 的 dangerouslySetInnerHTML 直接渲染 HTML:

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

function helloWorld() {
  const html = `<h1 style="color: red">Wallace is way taller than other reporters.</h1>`
  return <View dangerouslySetInnerHTML={{ __html: html }}></View>
}

<template>
  <view v-html="html"></view>
</template>

<script>
export default {
  data () {
    return {
      html: `<h1 style="color: red">Wallace is way taller than other reporters.</h1>`
    }  }
            
}
</script>

自定義 HTML 樣式

直接設置 HTML 不會讓 HTML 標簽帶上瀏覽器的默認樣式，Taro 提供兩種內置樣式我們可以直接引入生效：

• @tarojs/taro/html.css: W3C HTML4 的內置樣式，只有 HTML4 標簽樣式，體積較小，兼容性強，能適應大多數情況。
• @tarojs/taro/html5.css: Chrome(Blink) HTML5 的內置樣式，內置樣式豐富，包括了大多數 HTML5 標簽，體積較大，不一定支持所有小程序容器。

為了讓內置的標簽樣式起作用，我們還需要將 HTML 容器的 CSS 類設置為 .taro_html:

import '@tarojs/taro/html.css'
function helloWorld() {
  const html = `<h1 style="color: red">Wallace is way taller than other reporters.</h1>`
  return <View className="taro_html" dangerouslySetInnerHTML={{ __html: html }}></View>
}

<template>
  <view v-html="html" class="taro_html"></view>
</template>

<script>
import '@tarojs/taro/html.css'

export default {
  data () {
    return {
      html: `<h1 style="color: red">Wallace is way taller than other reporters.</h1>`
    }
  }
}
</script>

同樣地，我們也可以自己編寫 CSS 樣式，Taro 最終渲染的 HTML 標簽的類名都和 HTML 標簽名保持一致，例如我們的容器 CSS 類名為 my_css，想要設置 h1 標簽的樣式，那就這樣這樣做：

.my_css .h1 {
  font-size: 30px;
}

你可能會傾向于其他瀏覽器的默認樣式：

• Firefox
• Internet Explorer
• Safari/Chrome(Webkit)
• Opera
• W3C HTML5 Spec
• normalize.css

HTML 轉義

由于進行 HTML 轉義需要消耗較多的性能和較大的體積，默認而言 Taro 的 HTML 接口只接受轉義后的 HTML 字符串，我們推薦直接在服務端返回轉義后的 HTML。如果確實需要在客戶端轉義，開源社區(qū)有兩個較好的選擇：

• he: 體積較大，但開源協(xié)議更為寬松
• entities: 體積較小，但開源協(xié)議更為嚴格

你可能會需要高級選項的 transformText 配合 HTML 轉義進行字符串渲染。

綁定事件

出于作用域和安全因素考慮，Taro 會把 HTML 字符串中的事件和 JavaScript 全部清除。但我們仍然有辦法給 HTML 綁定事件：

import '@tarojs/taro/html.css'
function helloWorld() {
  const html = `<h1 id="test">Wallace is way taller than other reporters.</h1>`
  useEffect(() => {
    const el = document.getElementById('test')
    function testOnTap (event) {
      // do something
      ...
    }
    el.addEventListener('tap', testOnTap)
    return () => {
      el.removeEventListener('tap', testOnTap)
    }
  }, [])
  return <View className="taro_html" dangerouslySetInnerHTML={{ __html: html }}></View>
}

<template>
  <view v-html="html" class="taro_html"></view>
</template>

<script>
import '@tarojs/taro/html.css'

export default {
  data () {
    return {
      html: `<h1 id="test">Wallace is way taller than other reporters.</h1>`
    }
  },
  mounted () {
    const el = document.getElementById('test')
    el.addEventListener('tap', this.testOnTap)
  },
  testOnTap (event) {
    // do something
    ...
  },
  beforeDestroy () {
    const el = document.getElementById('test')
    el.removeEventListener('tap', this.testOnTap)
  }
}
</script>

如果需要動態(tài)綁定事件的元素沒有 ID 的話，你可能需要使用高級選項的 transformElement。

高級選項

如果內置的功能無法滿足需求或渲染結果不如預期，Taro 還提供了 HTML 渲染的高級選項，高級選項可以通過 Taro.options.html 訪問：

import Taro from '@tarojs/taro'
// 不解析 souce 標簽中的內容
Taro.options.html.skipElements.add('source')

skipElements

類型：Set<string>

默認值：new Set(['style', 'script'])

HashSet 中包含的 HTML 標簽將不會被解析。

voidElements

類型：Set<string>

默認值：new Set([ '!doctype', 'area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr' ])

HashSet 中包含的 HTML 標簽不需要閉合標簽，例如 <img />。

closingElements

類型：Set<string>

默認值：new Set([ 'html', 'head', 'body', 'p', 'dt', 'dd', 'li', 'option', 'thead', 'th', 'tbody', 'tr', 'td', 'tfoot', 'colgroup' ])

HashSet 中包含的 HTML 標簽可以自動閉合，且不能被嵌套。

transformText

類型：(taroText: TaroText, text: Text) => TaroText

默認值：void

該函數第一個參數的值為 Taro 默認處理好的 TaroText，第二個參數是 HTML 解析器解析好的 Text，最后返回的 TaroText 對象參與 HTML 中的字符串渲染。

transformElement

類型：(taroElement: TaroElement, element: Element) => TaroElement

默認值：void

該函數第一個參數的值為 Taro 默認處理好的 TaroElement，第二個參數是 HTML 解析器解析好的 Element，最后返回的 TaroElement 對象參與 HTML 元素渲染。

示例：

// 給所有 img 標簽添加 aotu 類
Taro.options.html.transformElement = (el) => {
  if (el.nodeName === 'img') {
    el.setAttribute('class', 'aotu')
  }
  return el
}