react中html转换,React中的HTML转义写法

在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转义字符

版权 ©

或者十进制的转义字符

版权 ©

动态内容的转义

{'版权 ©'}

错误输出版权 ©

正确写法：直接使用UTF-8字符仍然可以正确输出

{'版权 ©'}

安全的做法是使用对应的Unicode码

{'版权 \u00a9'}

使用fromCharCode

{'版权 ' + String.fromCharCode(169)}

使用数组组装

{['版权 ', ©]}

使用dangerouslySetInnerHTML，可以避免React转义字符

以上内容就是React中的HTML转义写法，希望能帮助到大家。

react中html转换,React中的HTML转义写法相关推荐

python中单位转换_Python中的单位转换
我赞成在科学计算应用中使用显式单位.使用显式单位类似于刷牙.它在前面增加了一些乏味,但是从长远来看,你得到的类型安全性可以节省很多麻烦.比如说,not crashing $125 million or ...
java中element转换_java中实体类与xml的element相互转换
import org.w3c.dom.Document; import org.w3c.dom.Element; /** * @ClassName: DemoConvert * @Author: 个人 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
react 事件处理_在React中处理事件
react 事件处理在使用React渲染RESTful服务后,我们创建了简单的UI,用于渲染从RESTful服务获取的员工列表. 作为本文的一部分,我们将扩展同一应用程序以支持添加和删除员工操作. ...
如何在React JS组件和React JS App中添加CSS样式？
In this tutorial, we will only work with CSS styles. Please ensure you have basic knowledge of HTML, ...
我如何使用React和Typescript在freeCodeCamp中构建天气应用
by Kelvin Mai 通过凯文麦我如何使用React和Typescript在freeCodeCamp中构建天气应用 (How I built the weather app in freeCo ...
[react] react中除了在构造函数中绑定this,还有别的方式吗？
[react] react中除了在构造函数中绑定this,还有别的方式吗? 1:函数定义的时候使用箭头函数 2:函数调用是使用bind绑定this 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...
[react] 描述下在react中无状态组件和有状态组件的区别是什么？
[react] 描述下在react中无状态组件和有状态组件的区别是什么? 1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板 ...
[react] 举例说明在react中怎么使用样式
[react] 举例说明在react中怎么使用样式 all in js 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试 ...

react中html转换,React中的HTML转义写法

react中html转换,React中的HTML转义写法相关推荐

最新文章

热门文章