在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: '版权 ©' }} />
网友评论