JSX 與 HTML 非常相似,但是有些關鍵區別要注意。
> 注意:
>
> 關于 DOM 的區別,如行內樣式屬性?`style`,參考?[DOM 區別](http://reactjs.cn/react/docs/dom-differences.html)
## HTML 實體
HTML 實體可以插入到 JSX 的文本中。
~~~
<div>First · Second</div>
~~~
如果想在 JSX 表達式中顯示 HTML 實體,可以會遇到二次轉義的問題,因為 React 默認會轉義所有字符串,為了防止各種 XSS 攻擊。
~~~
// 錯誤: 會顯示 “First · Second”
<div>{'First · Second'}</div>
~~~
有多種繞過的方法。最簡單的是直接用 Unicode 字符。這時要確保文件是 UTF-8 編碼且網頁也指定為 UTF-8 編碼。
~~~
<div>{'First · Second'}</div>
~~~
安全的做法是先找到?[實體的 Unicode 編號](http://www.fileformat.info/info/unicode/char/b7/index.htm)?,然后在 JavaScript 字符串里使用。
~~~
<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
~~~
可以在數組里混合使用字符串和 JSX 元素。
~~~
<div>{['First ', <span>·</span>, ' Second']}</div>
~~~
萬不得已,可以直接使用原始 HTML。
~~~
<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
~~~
## 自定義 HTML 屬性
如果往原生 HTML 元素里傳入 HTML 規范里不存在的屬性,React 不會顯示它們。如果需要使用自定義屬性,要加?`data-`?前綴。
~~~
<div data-custom-attribute="foo" />
~~~
以?`aria-`?開頭的 [網絡無障礙] 屬性可以正常使用。
~~~
<div aria-hidden={true} />
~~~