直接使用UTF-8字元
<p>版权 ©</p>
使用HTML轉義字元
<p>版权 ©</p>
或者十進制的轉義字元
<p>版权 ©</p>
但是如果在外面加一層大括號的話,react為了防止xss會將轉義後的字元實體再次轉義
React 會將所有要顯示到DOM 的字串轉義,防止XSS。所以,如果 JSX 中含有轉義後的實體字符,例如 ©(©),則最後 DOM 中不會正確顯示,因為 React 自動把 © 中的特殊字符轉義了。
<p>{'版权 ©'}</p>
錯誤輸出
版权 ©
正確寫法:
直接使用UTF-8字元仍然可以正確輸出
<p>{'版权 ©'}</p>
安全的做法是使用對應的Unicode碼
<p>{'版权 \u00a9'}</p>
#使用fromCharCode
<p>{'版权 ' + String.fromCharCode(169)}</p>
使用陣列組裝
<p>{['版权 ', <span>©</span>]}</p>
使用dangerouslySetInnerHTML,可以避免React轉義字元
<p dangerouslySetInnerHTML={{ __html: '版权 ©' }} />
JSX Gotchas
#深入react技術堆疊
直接使用UTF-8字元
<p>版权 ©</p>
使用HTML轉義字元
<p>版权 ©</p>
或十進位的轉義字元
<p>版权 ©</p>
但是如果在外面加一層大括號的話,react為了防止xss會將轉義後的字元實體再次轉義
React 會將所有要顯示到DOM 的字串轉義,防止XSS。所以,如果 JSX 中含有轉義後的實體字符,例如 ©(©),則最後 DOM 中不會正確顯示,因為 React 自動把 © 中的特殊字符轉義了。
<p>{'版权 ©'}</p>
錯誤輸出
版权 ©
正確寫法:
直接使用UTF-8字元仍然可以正確輸出
<p>{'版权 ©'}</p>
安全的做法是使用對應的Unicode碼
<p>{'版权 \u00a9'}</p>
#使用fromCharCode
<p>{'版权 ' + String.fromCharCode(169)}</p>
使用陣列組裝
<p>{['版权 ', <span>©</span>]}</p>
使用dangerouslySetInnerHTML,可以避免React轉義字元
<p dangerouslySetInnerHTML={{ __html: '版权 ©' }} />
以上內容就是React中的HTML轉義寫法,希望能幫助大家。
相關推薦:
以上是React中的HTML轉義寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章!