摘要:所以,如果中含有转义后的实体字符,比如,则最后中不会正确显示,因为自动把中的特殊字符转义了。
在JSX中输出固定内容
直接使用UTF-8字符
版权 ©
使用HTML转义字符
版权 ©
或者十进制的转义字符
动态内容的转义版权 ©
但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义
React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以,如果 JSX 中含有转义后的实体字符,比如 ©(©),则最后 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。
{"版权 ©"}
错误输出
版权 ©
正确写法:
直接使用UTF-8字符仍然可以正确输出
{"版权 ©"}
安全的做法是使用对应的Unicode码
{"版权 u00a9"}
使用fromCharCode
{"版权 " + String.fromCharCode(169)}
使用数组组装
{["版权 ", ©]}
使用dangerouslySetInnerHTML,可以避免React转义字符
参考
JSX Gotchas
深入react技术栈
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90215.html
摘要:定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中,这种写法称为。 React初识 React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库),所以他只是和用户的界面打交道,你可以把它看成MVC中的V(视图)这一层。 组件 React的一切都是基于组件的。web世界的构成是基于各种HTML标签的...
摘要:并且只会执行表达式输出与上面的表达式不同的是表达式和都会执行这就是括号的作用。所以可以得出结论方法中结果添加括号的目的是为了更符号原生编码习惯的的思维并且在一些例如中编写时标签自动对齐方式更好看。 在学习过程中,发现一个小问题,因为小很少人关注讨论过这个问题, react构建component的render方法中return后面为什么要加括号?下面尝试给出些解释。首先(),(1,2)这...
摘要:都会造成错误,注意一定一定严格的用,所以我建议直接复制我的。因为用的话他会转义代码,写不写其实一个样。不可避免的,构建肯定是要用到的。这个时候一般用的是在外面保存然后里面调用第二个坑更隐蔽。 目标人群 献给熟悉基础的React语法的刚接触React的同学~ 如果你已经写过半年以上的React那也不用看了,毕竟我水平并不高 Whats React React 是一个不存在的网络公司Fac...
阅读 1748·2021-10-13 09:39
阅读 1317·2019-08-30 13:58
阅读 1412·2019-08-29 16:42
阅读 3561·2019-08-29 15:41
阅读 2991·2019-08-29 15:11
阅读 2470·2019-08-29 14:10
阅读 3405·2019-08-29 13:29
阅读 2087·2019-08-26 13:27