React中的HTML轉義寫法

小云云
發布: 2017-12-06 14:17:39
原創
5506 人瀏覽過

在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>
登入後複製
登入後複製

錯誤輸出

版权 &#169;
登入後複製
登入後複製

正確寫法:

  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: &#39;版权 &#169;&#39; }} />
    登入後複製
    登入後複製

參考

  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>
登入後複製
登入後複製

錯誤輸出

版权 &#169;
登入後複製
登入後複製

正確寫法:

  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: &#39;版权 &#169;&#39; }} />
    登入後複製
    登入後複製

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

相關推薦:

React中元件的寫法有哪些

React與Preact中關於setState的差異

#React事件系統知識

以上是React中的HTML轉義寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板