在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

JSX 陷阱

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

注意:

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

HTML 實體

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

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

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

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

有多種繞過的方法。最簡單的是直接用 Unicode 字符。這時要確保文件是 UTF-8 編碼且網(wǎng)頁也指定為 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- 開頭的 [網(wǎng)絡(luò)無障礙] 屬性可以正常使用。

 <div aria-hidden={true} />