本文摘自PHP中文网，作者小云云，侵删。
在JSX中输出固定内容 直接使用UTF-8字符 {代码...} 使用HTML转义字符 {代码...} 或者十进制的转义字符 {代码...} 动态内容的转义 但是如果在外面加一层大括号的话，react为了防止xss会将转义后的字符实体再次转义，本文我们就和大家分享React中的HTML转义写法 。
直接使用UTF-8字符
1
<p>版权 ?</p>使用HTML转义字符
1
<p>版权 ©</p>或者十进制的转义字符
1
<p>版权 ©</p>
动态内容的转义
但是如果在外面加一层大括号的话，react为了防止xss会将转义后的字符实体再次转义
React 会将所有要显示到 DOM 的字符串转义，防止 XSS。所以，如果 JSX 中含有转义后的实体字符，比如 ?（?），则最后 DOM 中不会正确显示，因为 React 自动把 ? 中的特殊字符转义了。
1 |
|
错误输出
1 |
|
正确写法：
直接使用UTF-8字符仍然可以正确输出
1
<p>{'版权 ?'}</p>安全的做法是使用对应的Unicode码
1
<p>{'版权 \u00a9'}</p>使用fromCharCode
1
<p>{'版权 '+ String.fromCharCode(169)}</p>使用数组组装
1
<p>{['版权 ', <span>©</span>]}</p>使用dangerouslySetInnerHTML，可以避免React转义字符
1
<p dangerouslySetInnerHTML={{ __html:'版权 ©'}} />
参考
JSX Gotchas
深入react技术栈
在JSX中输出固定内容
直接使用UTF-8字符
1
<p>版权 ?</p>使用HTML转义字符
1
<p>版权 ©</p>或者十进制的转义字符
1
<p>版权 ©</p>
动态内容的转义
但是如果在外面加一层大括号的话，react为了防止xss会将转义后的字符实体再次转义
React 会将所有要显示到 DOM 的字符串转义，防止 XSS。所以，如果 JSX 中含有转义后的实体字符，比如 ?（?），则最后 DOM 中不会正确显示，因为 React 自动把 ? 中的特殊字符转义了。
1 |
|
错误输出
1 |
|
正确写法：
直接使用UTF-8字符仍然可以正确输出
1
<p>{'版权 ?'}</p>安全的做法是使用对应的Unicode码
1
<p>{'版权 \u00a9'}</p>使用fromCharCode
1
<p>{'版权 '+ String.fromCharCode(169)}</p>使用数组组装
1
<p>{['版权 ', <span>©</span>]}</p>使用dangerouslySetInnerHTML，可以避免React转义字符
1
<p dangerouslySetInnerHTML={{ __html:'版权 ©'}} />
以上内容就是React中的HTML转义写法 ，希望能帮助到大家。
相关推荐：
React中组件的写法有哪些
React与Preact中关于setState的区别
React事件系统知识
以上就是React中的HTML转义写法 的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
html 空链接 href="#"与href="javascript:void(0)"的区别
更多相关阅读请进入《React》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
