React中的HTML转义写法

在JSX中输出固定内容
直接使用UTF-8字符

<div>版权 ©</div>
使用HTML转义字符

<div>版权 ©</div>
或者十进制的转义字符

<div>版权 ©</div>
动态内容的转义
但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义

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

<div>{'版权 ©'}</div>
错误输出

版权 ©
正确写法:

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

<div>{'版权 ©'}</div>
安全的做法是使用对应的Unicode码

<div>{'版权 \u00a9'}</div>
使用fromCharCode

<div>{'版权 ' + String.fromCharCode(169)}</div>
使用数组组装

<div>{['版权 ', <span>©</span>]}</div>
使用dangerouslySetInnerHTML,可以避免React转义字符

<div dangerouslySetInnerHTML={{ __html: '版权 ©' }} />

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 3,587评论 1 11
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 6,281评论 0 9
  • 1.1React 简介 React 把用户界面抽象成一个个组件,开发者通过组合这些组件,最终得到功能丰富、可交互的...
    sylvia_yue阅读 484评论 2 1
  • 一、什么是JSX 使用JSX声明一个变量(React 当中的元素): JSX是一种 JavaScript 的语法扩...
    Lia代码猪崽阅读 1,713评论 0 2
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,283评论 2 21