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技術棧