码迷,mamicode.com
首页 > Web开发 > 详细

react中dangerouslySetInnerHTML使用

时间:2020-05-11 18:45:53      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:react   直接   写入   rip   键值对   innerhtml   通过   detail   富文本编辑器   

在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。

在显示时,将内容写入__html对象中即可。具体如下:

<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />
如果是直接调用接口中的值,则是以上的写法,如果是单纯的显示固定的内容,用如下的写法:

<div dangerouslySetInnerHTML={{ __html: ‘<div>123</div>‘ }} />

注意:__html前面是两个横杠


原理:

1.dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;

2.有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

3.既可以插入DOM,又可以插入字符串;

4.不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。

 

react中dangerouslySetInnerHTML使用

标签:react   直接   写入   rip   键值对   innerhtml   通过   detail   富文本编辑器   

原文地址:https://www.cnblogs.com/ranyonsue/p/12870666.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!