React中的HTML转义写法

Charlie_Jade 发布于2019-08-21 17:55 / 3054人阅读

摘要：所以，如果中含有转义后的实体字符，比如，则最后中不会正确显示，因为自动把中的特殊字符转义了。

在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技术栈

超融合服务器专线服务 js中的ajax写法 linux中的转义符 html写法 html 链接写法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90215.html

React入门学习

摘要：对象的属性与组件的属性一一对应，但是有一个例外，就是属性，它表示组件的所有子节点。此外，还提供两种特殊状态的处理函数。组件中样式的写法这种方式错误使用这种方式，第一重大括号表示这是语法，第二重大括号表示样式对象。如何渲染到容器直接上代码： //第一个参数是构造的组件，第二个参数是使用组件的容器 ReactDom.render( , document.getEleme...

laznrbfe 2019-08-19 17:34 评论0 收藏0
react开发教程（－）初识

摘要：定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中，这种写法称为。 React初识 React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库)，所以他只是和用户的界面打交道，你可以把它看成MVC中的V(视图)这一层。组件 React的一切都是基于组件的。web世界的构成是基于各种HTML标签的...

Allen 2019-08-21 15:36 评论0 收藏0
react开发教程（－）初识

摘要：定义一个组件可以在其他组件中调用这个组件调用组件刘宇组件插入内容在上面的案例中可以看到吧写到当中，这种写法称为。 React初识 React是Facebook推出的一个javascript库(用来创建用户界面的Javascript库)，所以他只是和用户的界面打交道，你可以把它看成MVC中的V(视图)这一层。组件 React的一切都是基于组件的。web世界的构成是基于各种HTML标签的...

Lin_YT 2019-08-05 11:04 评论0 收藏0
render方法括号的作用

摘要：并且只会执行表达式输出与上面的表达式不同的是表达式和都会执行这就是括号的作用。所以可以得出结论方法中结果添加括号的目的是为了更符号原生编码习惯的的思维并且在一些例如中编写时标签自动对齐方式更好看。在学习过程中,发现一个小问题,因为小很少人关注讨论过这个问题, react构建component的render方法中return后面为什么要加括号?下面尝试给出些解释。首先(),(1,2)这...

AaronYuan 2019-08-21 18:00 评论0 收藏0
使用React 应当注意的几个地方

摘要：都会造成错误，注意一定一定严格的用，所以我建议直接复制我的。因为用的话他会转义代码，写不写其实一个样。不可避免的，构建肯定是要用到的。这个时候一般用的是在外面保存然后里面调用第二个坑更隐蔽。目标人群献给熟悉基础的React语法的刚接触React的同学~ 如果你已经写过半年以上的React那也不用看了，毕竟我水平并不高 Whats React React 是一个不存在的网络公司Fac...

高璐 2019-08-19 17:11 评论0 收藏0