React中的HTML转义写法

小云云
Lepaskan: 2017-12-06 14:17:39
asal
5499 orang telah melayarinya

在JSX中输出固定内容 直接使用UTF-8字符 {代码...} 使用HTML转义字符 {代码...} 或者十进制的转义字符 {代码...} 动态内容的转义 但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义,本文我们就和大家分享React中的HTML转义写法 。

  1. 直接使用UTF-8字符

    <p>版权 ©</p>
    Salin selepas log masuk
    Salin selepas log masuk
  2. 使用HTML转义字符

    <p>版权 &copy;</p>
    Salin selepas log masuk
    Salin selepas log masuk

    或者十进制的转义字符

    <p>版权 &#169;</p>
    Salin selepas log masuk
    Salin selepas log masuk

动态内容的转义

但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义

React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以,如果 JSX 中含有转义后的实体字符,比如 ©(©),则最后 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。

<p>{'版权 &#169;'}</p>
Salin selepas log masuk
Salin selepas log masuk

错误输出

版权 &#169;
Salin selepas log masuk
Salin selepas log masuk

正确写法:

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

    <p>{'版权 ©'}</p>
    Salin selepas log masuk
    Salin selepas log masuk
  2. 安全的做法是使用对应的Unicode码

    <p>{'版权 \u00a9'}</p>
    Salin selepas log masuk
    Salin selepas log masuk
  3. 使用fromCharCode

    <p>{'版权 ' + String.fromCharCode(169)}</p>
    Salin selepas log masuk
    Salin selepas log masuk
  4. 使用数组组装

    <p>{['版权 ', <span>&#169;</span>]}</p>
    Salin selepas log masuk
    Salin selepas log masuk
  5. 使用dangerouslySetInnerHTML,可以避免React转义字符

    <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />
    Salin selepas log masuk
    Salin selepas log masuk

参考

  1. JSX Gotchas

  2. 深入react技术栈


在JSX中输出固定内容

  1. 直接使用UTF-8字符

    <p>版权 ©</p>
    Salin selepas log masuk
    Salin selepas log masuk
  2. 使用HTML转义字符

    <p>版权 &copy;</p>
    Salin selepas log masuk
    Salin selepas log masuk

    或者十进制的转义字符

    <p>版权 &#169;</p>
    Salin selepas log masuk
    Salin selepas log masuk

动态内容的转义


但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义

React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以,如果 JSX 中含有转义后的实体字符,比如 ©(©),则最后 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。

<p>{'版权 &#169;'}</p>
Salin selepas log masuk
Salin selepas log masuk

错误输出

版权 &#169;
Salin selepas log masuk
Salin selepas log masuk

正确写法:

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

    <p>{'版权 ©'}</p>
    Salin selepas log masuk
    Salin selepas log masuk
  2. 安全的做法是使用对应的Unicode码

    <p>{'版权 \u00a9'}</p>
    Salin selepas log masuk
    Salin selepas log masuk
  3. 使用fromCharCode

    <p>{'版权 ' + String.fromCharCode(169)}</p>
    Salin selepas log masuk
    Salin selepas log masuk
  4. 使用数组组装

    <p>{['版权 ', <span>&#169;</span>]}</p>
    Salin selepas log masuk
    Salin selepas log masuk
  5. 使用dangerouslySetInnerHTML,可以避免React转义字符

    <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />
    Salin selepas log masuk
    Salin selepas log masuk

以上内容就是React中的HTML转义写法 ,希望能帮助到大家。

相关推荐:

React中组件的写法有哪些

React与Preact中关于setState的区别

React事件系统知识

Atas ialah kandungan terperinci React中的HTML转义写法 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan