React中的HTML转义写法1

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

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

直接使用UTF-8字符
```
版权 ?
```
使用HTML转义字符
```
版权 &copy;
```
或者十进制的转义字符
```
版权 &#169;
```

动态内容的转义

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

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

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

错误输出

版权 &#169;

正确写法：

直接使用UTF-8字符仍然可以正确输出
```
{'版权 ?'}
```
安全的做法是使用对应的Unicode码
```
{'版权 \u00a9'}
```

使用fromCharCode

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

使用数组组装

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

使用dangerouslySetInnerHTML，可以避免React转义字符
```

```

参考

JSX Gotchas
深入react技术栈

在JSX中输出固定内容

直接使用UTF-8字符
```
版权 ?
```
使用HTML转义字符
```
版权 &copy;
```
或者十进制的转义字符
```
版权 &#169;
```