React中的HTML轉(zhuǎn)義寫(xiě)法
發(fā)表時(shí)間：2024-05-09 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]在JSX中輸出固定內(nèi)容 直接使用UTF-8字符 {代碼...} 使用HTML轉(zhuǎn)義字符 {代碼...} 或者十進(jìn)制的轉(zhuǎn)義字符 {代碼...} 動(dòng)態(tài)內(nèi)容的轉(zhuǎn)義 但是如果在外面加一層大括號(hào)的話(huà)，react為了防止xss會(huì)將轉(zhuǎn)義后的字符實(shí)體再次轉(zhuǎn)義，本文我們就和大家分享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)的話(huà)，react為了防止xss會(huì)將轉(zhuǎn)義后的字符實(shí)體再次轉(zhuǎn)義，本文我們就和大家分享React中的HTML轉(zhuǎn)義寫(xiě)法 。
直接使用UTF-8字符
<p>版權(quán) ?</p>
使用HTML轉(zhuǎn)義字符
<p>版權(quán) ©</p>
或者十進(jìn)制的轉(zhuǎn)義字符
<p>版權(quán) ©</p>
動(dòng)態(tài)內(nèi)容的轉(zhuǎn)義
但是如果在外面加一層大括號(hào)的話(huà)，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) ©'}</p>錯(cuò)誤輸出
版權(quán) ©
正確寫(xiě)法：
直接使用UTF-8字符仍然可以正確輸出
<p>{'版權(quán) ?'}</p>安全的做法是使用對(duì)應(yīng)的Unicode碼
<p>{'版權(quán) \u00a9'}</p>使用fromCharCode
<p>{'版權(quán) ' + String.fromCharCode(169)}</p>使用數(shù)組組裝
<p>{['版權(quán) ', <span>©</span>]}</p>使用dangerouslySetInnerHTML，可以避免React轉(zhuǎn)義字符
<p dangerouslySetInnerHTML={{ __html: '版權(quán) ©' }} />
參考
JSX Gotchas
深入react技術(shù)棧
在JSX中輸出固定內(nèi)容
直接使用UTF-8字符
<p>版權(quán) ?</p>
使用HTML轉(zhuǎn)義字符
<p>版權(quán) ©</p>
或者十進(jìn)制的轉(zhuǎn)義字符
<p>版權(quán) ©</p>
動(dòng)態(tài)內(nèi)容的轉(zhuǎn)義
但是如果在外面加一層大括號(hào)的話(huà)，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) ©'}</p>錯(cuò)誤輸出
版權(quán) ©
正確寫(xiě)法：
直接使用UTF-8字符仍然可以正確輸出
<p>{'版權(quán) ?'}</p>安全的做法是使用對(duì)應(yīng)的Unicode碼
<p>{'版權(quán) \u00a9'}</p>使用fromCharCode
<p>{'版權(quán) ' + String.fromCharCode(169)}</p>使用數(shù)組組裝
<p>{['版權(quán) ', <span>©</span>]}</p>使用dangerouslySetInnerHTML，可以避免React轉(zhuǎn)義字符
<p dangerouslySetInnerHTML={{ __html: '版權(quán) ©' }} />
以上內(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)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
