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: &#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>

错误输出

版权 ©

正确写法：

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中文网其他相关文章！