在JSX中输出固定内容 直接使用utf-8字符 {代码…} 使用HTML转义字符 {代码…} 或者十进制的转义字符 {代码…} 动态内容的转义 但是如果在外面加一层大括号的话，react为了防止xss会将转义后的字符实体再次转义，本文我们就和大家分享React中的HTML转义写法 。
直接使用utf-8字符
版权 ©
登录后复制登录后复制
使用HTML转义字符
版权 ©
登录后复制登录后复制
或者十进制的转义字符
立即学习“前端免费学习笔记（深入）”；
版权 ©
登录后复制登录后复制
动态内容的转义
但是如果在外面加一层大括号的话，react为了防止xss会将转义后的字符实体再次转义
React 会将所有要显示到 DOM 的字符串转义，防止 XSS。所以，如果 JSX 中含有转义后的实体字符，比如 ©（©），则最后 DOM 中不会正确显示，因为 React 自动把 © 中的特殊字符转义了。
{'版权 ©'}
登录后复制登录后复制
错误输出
版权 ©
登录后复制登录后复制
正确写法：
直接使用utf-8字符仍然可以正确输出
{'版权 ©'}
登录后复制登录后复制
安全的做法是使用对应的Unicode码
{'版权 \u00a9'}
登录后复制登录后复制
使用fromCharCode
{'版权 ' + String.fromCharCode(169)}
登录后复制登录后复制
使用数组组装
{['版权 ', ©]}
登录后复制登录后复制
使用dangerouslySetInnerHTML，可以避免React转义字符
登录后复制登录后复制
参考
JSX Gotchas
深入react技术栈
在JSX中输出固定内容
直接使用utf-8字符
版权 ©
登录后复制登录后复制
使用HTML转义字符
版权 ©
登录后复制登录后复制
或者十进制的转义字符
立即学习“前端免费学习笔记（深入）”；
版权 ©
登录后复制登录后复制
动态内容的转义
但是如果在外面加一层大括号的话，react为了防止xss会将转义后的字符实体再次转义
React 会将所有要显示到 DOM 的字符串转义，防止 XSS。所以，如果 JSX 中含有转义后的实体字符，比如 ©（©），则最后 DOM 中不会正确显示，因为 React 自动把 © 中的特殊字符转义了。
{'版权 ©'}
登录后复制登录后复制
错误输出
版权 ©
登录后复制登录后复制
正确写法：
直接使用utf-8字符仍然可以正确输出
{'版权 ©'}
登录后复制登录后复制
安全的做法是使用对应的Unicode码
{'版权 \u00a9'}
登录后复制登录后复制
使用fromCharCode
{'版权 ' + String.fromCharCode(169)}
登录后复制登录后复制
使用数组组装
{['版权 ', ©]}
登录后复制登录后复制
使用dangerouslySetInnerHTML，可以避免React转义字符
登录后复制登录后复制
以上内容就是React中的HTML转义写法 ，希望能帮助到大家。
相关推荐：
React中组件的写法有哪些
React中组件的写法有哪些
React中组件的写法有哪些
以上就是React中的HTML转义写法 的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3194696.html
