JSX 陷阱

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

注意:

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

HTML 實體

HTML 實體可以插入到 JSX 的文本中。

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

如果想在 JSX 表達式中顯示 HTML 實體，可以會遇到二次轉義的問題，因為 React 默認會轉義所有字符串，為了防止各種 XSS 攻擊。

 // 錯誤: 會顯示 “First · Second”
 <div>{'First &middot; Second'}</div>

有多種繞過的方法。最簡單的是直接用 Unicode 字符。這時要確保文件是 UTF-8 編碼且網頁也指定為 UTF-8 編碼。

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

安全的做法是先找到 實體的 Unicode 編號 ，然后在 JavaScript 字符串里使用。

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

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

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

萬不得已，可以直接使用原始 HTML。

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

自定義 HTML 屬性

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

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

以 aria- 開頭的 [網絡無障礙] 屬性可以正常使用。

 <div aria-hidden={true} />