React中的HTML转义写法

在JSX中输出固定内容

1. 直接使用UTF-8字符

   <div>版权 ©</div>

2. 使用HTML转义字符

   <div>版权 &copy;</div>

   或者十进制的转义字符

   <div>版权 &#169;</div>

动态内容的转义

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

React 会将全部要显示到 DOM 的字符串转义，防止 XSS。因此，若是 JSX 中含有转义后的实体字符，好比 ©（©），则最后 DOM 中不会正确显示，由于 React 自动把 © 中的特殊字符转义了。

<div>{'版权 &#169;'}</div>

错误输出

版权 ©

正确写法：

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

   <div>{'版权 ©'}</div>

2. 安全的作法是使用对应的Unicode码

   <div>{'版权 \u00a9'}</div>

3. 使用fromCharCode

   <div>{'版权 ' + String.fromCharCode(169)}</div>

4. 使用数组组装

   <div>{['版权 ', <span>&#169;</span>]}</div>

5. 使用dangerouslySetInnerHTML，能够避免React转义字符

   <div dangerouslySetInnerHTML={{ __html: '版权 &#169;' }} />

参考

1. JSX Gotchas
2. 深刻react技术栈