JSX 與 HTML 非常相似,但是有些關(guān)鍵區(qū)別要注意。
注意:
關(guān)于 DOM 的區(qū)別,如行內(nèi)樣式屬性
style
,參考 DOM 區(qū)別
HTML 實(shí)體可以插入到 JSX 的文本中。
<div>First · Second</div>
如果想在 JSX 表達(dá)式中顯示 HTML 實(shí)體,可以會(huì)遇到二次轉(zhuǎn)義的問(wèn)題,因?yàn)?React 默認(rèn)會(huì)轉(zhuǎn)義所有字符串,為了防止各種 XSS 攻擊。
// 錯(cuò)誤: 會(huì)顯示 “First · Second”
<div>{'First · Second'}</div>
有多種繞過(guò)的方法。最簡(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>·</span>, ' Second']}</div>
萬(wàn)不得已,可以直接使用原始 HTML。
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First · Second'}} />
如果往原生 HTML 元素里傳入 HTML 規(guī)范里不存在的屬性,React 不會(huì)顯示它們。如果需要使用自定義屬性,要加 data-
前綴。
<div data-custom-attribute="foo" />
以 aria-
開(kāi)頭的 [網(wǎng)絡(luò)無(wú)障礙] 屬性可以正常使用。
<div aria-hidden={true} />