首页 > html教程 > 正文

React中的HTML转义写法

原创 2017-12-06 14:17:39 0 113
赞助会员专享特权

在JSX中输出固定内容 直接使用UTF-8字符 {代码...} 使用HTML转义字符 {代码...} 或者十进制的转义字符 {代码...} 动态内容的转义 但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义,本文我们就和大家分享React中的HTML转义写法 。

  1. 直接使用UTF-8字符

    <p>版权 ©</p>
  2. 使用HTML转义字符

    <p>版权 &copy;</p>

    或者十进制的转义字符

    <p>版权 &#169;</p>

动态内容的转义

但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义

React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以,如果 JSX 中含有转义后的实体字符,比如 ©(©),则最后 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。

<p>{'版权 &#169;'}</p>

错误输出

版权 &#169;

正确写法:

  1. 直接使用UTF-8字符仍然可以正确输出

    <p>{'版权 ©'}</p>
  2. 安全的做法是使用对应的Unicode码

    <p>{'版权 \u00a9'}</p>
  3. 使用fromCharCode

    <p>{'版权 ' + String.fromCharCode(169)}</p>
  4. 使用数组组装

    <p>{['版权 ', <span>&#169;</span>]}</p>
  5. 使用dangerouslySetInnerHTML,可以避免React转义字符

    <p dangerouslySetInnerHTML={{ __html: '版权 &#169;' }} />

参考

  1. JSX Gotchas

  2. 深入react技术栈


在JSX中输出固定内容

  1. 直接使用UTF-8字符

    <p>版权 ©</p>
  2. 使用HTML转义字符

    <p>版权 &copy;</p>

    或者十进制的转义字符

    <p>版权 &#169;</p>

动态内容的转义


但是如果在外面加一层大括号的话,react为了防止xss会将转义后的字符实体再次转义

React 会将所有要显示到 DOM 的字符串转义,防止 XSS。所以,如果 JSX 中含有转义后的实体字符,比如 ©(©),则最后 DOM 中不会正确显示,因为 React 自动把 © 中的特殊字符转义了。

<p>{'版权 &#169;'}</p>

错误输出

版权 &#169;

正确写法:

  1. 直接使用UTF-8字符仍然可以正确输出

    <p>{'版权 ©'}</p>
  2. 安全的做法是使用对应的Unicode码

    <p>{'版权 \u00a9'}</p>
  3. 使用fromCharCode

    <p>{'版权 ' + String.fromCharCode(169)}</p>
  4. 使用数组组装

    <p>{['版权 ', <span>&#169;</span>]}</p>
  5. 使用dangerouslySetInnerHTML,可以避免React转义字符

    <p dangerouslySetInnerHTML={{ __html: '版权 &#169;' }} />

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

相关推荐:

React中组件的写法有哪些

React与Preact中关于setState的区别

React事件系统知识

以上就是React中的HTML转义写法 的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:React HTML 写法
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • Html如何设置横向导航结构_HTML/Xhtml_网页制作
  • Html+css实现纯文字和带图标的按钮_HTML/Xhtml_网页制作
  • HTML对于元素水平垂直居中的探讨_HTML/Xhtml_网页制作
  • 修改输入框placeholder文字默认颜色-webkit-input-placeholder方法_HTML/Xhtml_网页制作
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节