React中的HTML轉(zhuǎn)義寫(xiě)法

在JSX中輸出固定內(nèi)容 直接使用UTF-8字符 {代碼...} 使用HTML轉(zhuǎn)義字符 {代碼...} 或者十進(jìn)制的轉(zhuǎn)義字符 {代碼...} 動(dòng)態(tài)內(nèi)容的轉(zhuǎn)義 但是如果在外面加一層大括號(hào)的話，react為了防止xss會(huì)將轉(zhuǎn)義后的字符實(shí)體再次轉(zhuǎn)義，本文我們就和大家分享React中的HTML轉(zhuǎn)義寫(xiě)法 。

1. 直接使用UTF-8字符

   <p>版權(quán) ?</p>

2. 使用HTML轉(zhuǎn)義字符

   <p>版權(quán) &copy;</p>

   或者十進(jìn)制的轉(zhuǎn)義字符

   <p>版權(quán) &#169;</p>

動(dòng)態(tài)內(nèi)容的轉(zhuǎn)義

但是如果在外面加一層大括號(hào)的話，react為了防止xss會(huì)將轉(zhuǎn)義后的字符實(shí)體再次轉(zhuǎn)義

React 會(huì)將所有要顯示到 DOM 的字符串轉(zhuǎn)義，防止 XSS。所以，如果 JSX 中含有轉(zhuǎn)義后的實(shí)體字符，比如 ?（?），則最后 DOM 中不會(huì)正確顯示，因?yàn)?React 自動(dòng)把 ? 中的特殊字符轉(zhuǎn)義了。

<p>{'版權(quán) &#169;'}</p>

錯(cuò)誤輸出

版權(quán) ©

正確寫(xiě)法：

1. 直接使用UTF-8字符仍然可以正確輸出

   <p>{'版權(quán) ?'}</p>

2. 安全的做法是使用對(duì)應(yīng)的Unicode碼

   <p>{'版權(quán) \u00a9'}</p>

3. 使用fromCharCode

   <p>{'版權(quán) ' + String.fromCharCode(169)}</p>

4. 使用數(shù)組組裝

   <p>{['版權(quán) ', <span>&#169;</span>]}</p>

5. 使用dangerouslySetInnerHTML，可以避免React轉(zhuǎn)義字符

   <p dangerouslySetInnerHTML={{ __html: '版權(quán) &#169;' }} />

參考

1. JSX Gotchas

2. 深入react技術(shù)棧

在JSX中輸出固定內(nèi)容

1. 直接使用UTF-8字符

   <p>版權(quán) ?</p>

2. 使用HTML轉(zhuǎn)義字符

   <p>版權(quán) &copy;</p>

   或者十進(jìn)制的轉(zhuǎn)義字符

   <p>版權(quán) &#169;</p>

動(dòng)態(tài)內(nèi)容的轉(zhuǎn)義

但是如果在外面加一層大括號(hào)的話，react為了防止xss會(huì)將轉(zhuǎn)義后的字符實(shí)體再次轉(zhuǎn)義

React 會(huì)將所有要顯示到 DOM 的字符串轉(zhuǎn)義，防止 XSS。所以，如果 JSX 中含有轉(zhuǎn)義后的實(shí)體字符，比如 ?（?），則最后 DOM 中不會(huì)正確顯示，因?yàn)?React 自動(dòng)把 ? 中的特殊字符轉(zhuǎn)義了。

<p>{'版權(quán) &#169;'}</p>

錯(cuò)誤輸出

版權(quán) ©

正確寫(xiě)法：

1. 直接使用UTF-8字符仍然可以正確輸出

   <p>{'版權(quán) ?'}</p>

2. 安全的做法是使用對(duì)應(yīng)的Unicode碼

   <p>{'版權(quán) \u00a9'}</p>

3. 使用fromCharCode

   <p>{'版權(quán) ' + String.fromCharCode(169)}</p>

4. 使用數(shù)組組裝

   <p>{['版權(quán) ', <span>&#169;</span>]}</p>

5. 使用dangerouslySetInnerHTML，可以避免React轉(zhuǎn)義字符

   <p dangerouslySetInnerHTML={{ __html: '版權(quán) &#169;' }} />

以上內(nèi)容就是React中的HTML轉(zhuǎn)義寫(xiě)法 ，希望能幫助到大家。

相關(guān)推薦：

React中組件的寫(xiě)法有哪些

React與Preact中關(guān)于setState的區(qū)別

React事件系統(tǒng)知識(shí)

以上就是React中的HTML轉(zhuǎn)義寫(xiě)法 的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！