鍍金池/ 教程/ HTML/ JSX 陷阱
顯示數(shù)據(jù)
組件的引用
Controlled Input 值為 null 的情況
Reconciliation
子 props 的類(lèi)型
組件的詳細(xì)說(shuō)明和生命周期
傳遞 Props
特殊的非 DOM 屬性
組件 API
PureRenderMixin
雙向綁定輔助工具
瀏覽器中的工作原理
深入 JSX
表單組件
Dangerously Set innerHTML
入門(mén)
JSX 中的 If-Else
克隆組件
教程
更多的關(guān)于Refs
JSX 的 false 處理
高級(jí)性能
Mounting 后 componentWillReceiveProps 未被觸發(fā)
簡(jiǎn)介
測(cè)試工具集
JSX 陷阱
工具集成(ToolingIntegration)
公開(kāi)組件功能
通過(guò) AJAX 加載初始數(shù)據(jù)
事件系統(tǒng)
可復(fù)用組件
this.props.children undefined
不可變數(shù)據(jù)的輔助工具(Immutability Helpers)
動(dòng)態(tài)交互式用戶界面
組件的 DOM 事件監(jiān)聽(tīng)
復(fù)合組件
動(dòng)畫(huà)
插件
JSX 展開(kāi)屬性
行內(nèi)樣式
性能分析工具
類(lèi)名操作
與其他類(lèi)庫(kù)并行使用 React
鍵控的片段
標(biāo)簽和屬性支持
組件間的通信
React (虛擬)DOM 術(shù)語(yǔ)
JSX 根節(jié)點(diǎn)的最大數(shù)量
在樣式props中快速制定像素值
頂層 API
深入理解 React
自閉合標(biāo)簽
為什么使用 React?
getInitialState 里的 Props 是一個(gè)反模式
與 DOM 的差異

JSX 陷阱

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)義的問(wèn)題,因?yàn)?React 默認(rèn)會(huì)轉(zhuǎn)義所有字符串,為了防止各種 XSS 攻擊。

 // 錯(cuò)誤: 會(huì)顯示 “First &middot; Second”
 <div>{'First &middot; 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>&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- 開(kāi)頭的 [網(wǎng)絡(luò)無(wú)障礙] 屬性可以正常使用。

 <div aria-hidden={true} />