React中的HTML轉義寫法

在JSX中輸出固定內容

1. 直接使用UTF-8字符

   <div>版權 ©</div>

2. 使用HTML轉義字符

   <div>版權 &copy;</div>

   或者十進制的轉義字符

   <div>版權 &#169;</div>

動態內容的轉義

可是若是在外面加一層大括號的話，react爲了防止xss會將轉義後的字符實體再次轉義

React 會將全部要顯示到 DOM 的字符串轉義，防止 XSS。因此，若是 JSX 中含有轉義後的實體字符，好比 ©（©），則最後 DOM 中不會正確顯示，由於 React 自動把 © 中的特殊字符轉義了。

<div>{'版權 &#169;'}</div>

錯誤輸出

版權 ©

正確寫法：

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

   <div>{'版權 ©'}</div>

2. 安全的作法是使用對應的Unicode碼

   <div>{'版權 \u00a9'}</div>

3. 使用fromCharCode

   <div>{'版權 ' + String.fromCharCode(169)}</div>

4. 使用數組組裝

   <div>{['版權 ', <span>&#169;</span>]}</div>

5. 使用dangerouslySetInnerHTML，能夠避免React轉義字符

   <div dangerouslySetInnerHTML={{ __html: '版權 &#169;' }} />

參考

1. JSX Gotchas
2. 深刻react技術棧