直接使用UTF-8字符
<p>版权 ©</p>
使用HTML转义字符
<p>版权 ©</p>
或者十进制的转义字符
<p>版权 ©</p>
但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义
React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以,如果 JSX 中含有转义后的实体字符,比如 ©(©),则最后 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。
<p>{'版权 ©'}</p>
错误输出
版权 ©
正确写法:
直接使用UTF-8字符仍然可以正确输出
<p>{'版权 ©'}</p>
安全的做法是使用对应的Unicode码
<p>{'版权 \u00a9'}</p>
使用fromCharCode
<p>{'版权 ' + String.fromCharCode(169)}</p>
使用数组组装
<p>{['版权 ', <span>©</span>]}</p>
使用dangerouslySetInnerHTML,可以避免React转义字符
<p dangerouslySetInnerHTML={{ __html: '版权 ©' }} />
JSX Gotchas
深入react技术栈
直接使用UTF-8字符
<p>版权 ©</p>
使用HTML转义字符
<p>版权 ©</p>
或者十进制的转义字符
<p>版权 ©</p>
但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义
React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以,如果 JSX 中含有转义后的实体字符,比如 ©(©),则最后 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。
<p>{'版权 ©'}</p>
错误输出
版权 ©
正确写法:
直接使用UTF-8字符仍然可以正确输出
<p>{'版权 ©'}</p>
安全的做法是使用对应的Unicode码
<p>{'版权 \u00a9'}</p>
使用fromCharCode
<p>{'版权 ' + String.fromCharCode(169)}</p>
使用数组组装
<p>{['版权 ', <span>©</span>]}</p>
使用dangerouslySetInnerHTML,可以避免React转义字符
<p dangerouslySetInnerHTML={{ __html: '版权 ©' }} />
以上内容就是React中的HTML转义写法 ,希望能帮助到大家。
相关推荐:
以上就是React中的HTML转义写法 的详细内容,更多请关注php中文网其它相关文章!
已抢65523个
抢已抢30066个
抢已抢16423个
抢已抢8354个
抢已抢10783个
抢已抢22175个
抢