JSX 與 HTML 非常相似，但是有些關(guān)鍵區(qū)別要注意。

注意:

關(guān)于 DOM 的區(qū)別，如行內(nèi)樣式屬性 style，參考 DOM 區(qū)別

HTML 實(shí)體

HTML 實(shí)體可以插入到 JSX 的文本中。

 <div>First &middot; Second</div>

如果想在 JSX 表達(dá)式中顯示 HTML 實(shí)體，可以會(huì)遇到二次轉(zhuǎn)義的問題，因?yàn)?React 默認(rèn)會(huì)轉(zhuǎn)義所有字符串，為了防止各種 XSS 攻擊。

 // 錯(cuò)誤: 會(huì)顯示 “First · Second”
 <div>{'First &middot; Second'}</div>

有多種繞過的方法。最簡(jiǎn)單的是直接用 Unicode 字符。這時(shí)要確保文件是 UTF-8 編碼且網(wǎng)頁(yè)也指定為 UTF-8 編碼。

  <div>{'First · Second'}</div>

安全的做法是先找到 實(shí)體的 Unicode 編號(hào) ，然后在 JavaScript 字符串里使用。

 <div>{'First \u00b7 Second'}</div>
 <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

可以在數(shù)組里混合使用字符串和 JSX 元素。

 <div>{['First ', <span>&middot;</span>, ' Second']}</div>

萬(wàn)不得已，可以直接使用原始 HTML。

 <div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />

自定義 HTML 屬性

如果往原生 HTML 元素里傳入 HTML 規(guī)范里不存在的屬性，React 不會(huì)顯示它們。如果需要使用自定義屬性，要加 data- 前綴。

 <div data-custom-attribute="foo" />

以 aria- 開頭的 [網(wǎng)絡(luò)無(wú)障礙] 屬性可以正常使用。

 <div aria-hidden={true} />