React中的HTML轉義寫法

在JSX中輸出固定內容 直接使用UTF-8字符 {代碼...} 使用HTML轉義字符 {代碼...} 或者十進制的轉義字符 {代碼...} 動態內容的轉義 但是如果在外面加一層大括號的話，react為了防止xss會將轉義后的字符實體再次轉義，本文我們就和大家分享React中的HTML轉義寫法 。

1. 直接使用UTF-8字符

   <p>版權 ?</p>

2. 使用HTML轉義字符

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

   或者十進制的轉義字符

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

動態內容的轉義

但是如果在外面加一層大括號的話，react為了防止xss會將轉義后的字符實體再次轉義

React 會將所有要顯示到 DOM 的字符串轉義，防止 XSS。所以，如果 JSX 中含有轉義后的實體字符，比如 ?（?），則最后 DOM 中不會正確顯示，因為 React 自動把 ? 中的特殊字符轉義了。

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

錯誤輸出

版權 ©

正確寫法：

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

   <p>{'版權 ?'}</p>

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

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

3. 使用fromCharCode

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

4. 使用數組組裝

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

5. 使用dangerouslySetInnerHTML，可以避免React轉義字符

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

參考

1. JSX Gotchas

2. 深入react技術棧

在JSX中輸出固定內容

1. 直接使用UTF-8字符

   <p>版權 ?</p>

2. 使用HTML轉義字符

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

   或者十進制的轉義字符

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

動態內容的轉義

但是如果在外面加一層大括號的話，react為了防止xss會將轉義后的字符實體再次轉義

React 會將所有要顯示到 DOM 的字符串轉義，防止 XSS。所以，如果 JSX 中含有轉義后的實體字符，比如 ?（?），則最后 DOM 中不會正確顯示，因為 React 自動把 ? 中的特殊字符轉義了。

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

錯誤輸出

版權 ©

正確寫法：

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

   <p>{'版權 ?'}</p>

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

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

3. 使用fromCharCode

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

4. 使用數組組裝

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

5. 使用dangerouslySetInnerHTML，可以避免React轉義字符

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

以上內容就是React中的HTML轉義寫法 ，希望能幫助到大家。

相關推薦：

React中組件的寫法有哪些

React與Preact中關于setState的區別

React事件系統知識

以上就是React中的HTML轉義寫法 的詳細內容，更多請關注php中文網其它相關文章！