在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转义写法 ,希望能帮助到大家。
相关推荐: