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

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 樣式

直接設(shè)置 HTML 不會讓 HTML 標(biāo)簽帶上瀏覽器的默認(rèn)樣式，Taro 提供兩種內(nèi)置樣式我們可以直接引入生效：

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

為了讓內(nèi)置的標(biāo)簽樣式起作用，我們還需要將 HTML 容器的 CSS 類設(shè)置為 .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 標(biāo)簽的類名都和 HTML 標(biāo)簽名保持一致，例如我們的容器 CSS 類名為 my_css，想要設(shè)置 h1 標(biāo)簽的樣式，那就這樣這樣做：

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

你可能會傾向于其他瀏覽器的默認(rèn)樣式：

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

HTML 轉(zhuǎn)義

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

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

你可能會需要高級選項(xiàng)的 transformText 配合 HTML 轉(zhuǎn)義進(jìn)行字符串渲染。

綁定事件

出于作用域和安全因素考慮，Taro 會把 HTML 字符串中的事件和 JavaScript 全部清除。但我們?nèi)匀挥修k法給 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>

如果需要?jiǎng)討B(tài)綁定事件的元素沒有 ID 的話，你可能需要使用高級選項(xiàng)的 transformElement。

高級選項(xiàng)

如果內(nèi)置的功能無法滿足需求或渲染結(jié)果不如預(yù)期，Taro 還提供了 HTML 渲染的高級選項(xiàng)，高級選項(xiàng)可以通過 Taro.options.html 訪問：

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

skipElements

類型：Set<string>

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

HashSet 中包含的 HTML 標(biāo)簽將不會被解析。

voidElements

類型：Set<string>

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

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

closingElements

類型：Set<string>

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

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

transformText

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

默認(rèn)值：void

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

transformElement

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

默認(rèn)值：void

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

示例：

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