在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使用的更多相关文章

  1. react中实现搜索结果中关键词高亮显示

    网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换. react中实现起来似乎更简单一些. 我这里的需求是通过搜索框搜索出新闻列表,在 ...

  2. React中最基础的jsx语法

    import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...

  3. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  4. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  5. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  6. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  7. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  8. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  9. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

随机推荐

  1. SpeedButton

    SpeedButton是一个图形控件,本身没有句柄.因此它不能具有焦点.你可以使用TBitBtn,调整一些属性,可以使他们的外形很接近. 只有从TWinControl派生的控件,才具有Handle.你 ...

  2. 从python爬虫以及数据可视化的角度来为大家呈现“227事件”后,肖战粉丝的数据图

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取t.cn ...

  3. 弱智破解法——用python破解WIFI

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:李嘉图 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...

  4. 使用jquery清空input 文本框中的内容

    只需要将文本框的值置为空即可: function resetBtn(){ $("#name").val(""); }

  5. 腾讯推出超强少样本目标检测算法,公开千类少样本检测训练集FSOD | CVPR 2020

    论文提出了新的少样本目标检测算法,创新点包括Attention-RPN.多关系检测器以及对比训练策略,另外还构建了包含1000类的少样本检测数据集FSOD,在FSOD上训练得到的论文模型能够直接迁移到 ...

  6. github使用--配置sshkey

    配置sshkey 好处:每次提代码都不要输入用户名和密码. 1.生成key: 输入命令ssh-keygen -t rsa -C "邮箱地址" [邮箱地址:注册github时填写的邮 ...

  7. 《并发编程的艺术》阅读笔记之Volatile

    来源 在 JDK1.2 之前,Java的内存模型实现总是从主存(即共享内存)读取变量,是不需要进行特别的注意的.而在当前的 Java 内存模型下,线程可以把变量保存本地内存(比如机器的寄存器)中,而不 ...

  8. jquery字符串转数字

    1:parseInt(string) : 这个函数的功能是从string的开头开始解析,返回一个整数,说起来比较笼统,下面来看几个实例,大家就明白了: parseInt("1234blue& ...

  9. SVN部署(Centos7,Ubuntu)

    SVN 简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Sub ...

  10. 2019-2020-1 20199326《Linux内核原理与分析》第四周作业

    第四周学习内容 庖丁解牛Linux内核分析第三章:MenuOS的构造 Linux内核分析实验三 学到的一些知识 操作系统两大宝剑:1.中断上下文的切换--保存现场和恢复现场 2.进程上下文的切换 Li ...