react中dangerouslySetInnerHTML使用
在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中实现搜索结果中关键词高亮显示
网上看到很多js实现的关键词高亮显示,方法都是一个道理,先获取要替换的文字区域,然后在用正则匹配到关键词,并进行替换. react中实现起来似乎更简单一些. 我这里的需求是通过搜索框搜索出新闻列表,在 ...
- React中最基础的jsx语法
import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- 【原】React中,map出来的元素添加事件无法使用
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
随机推荐
- stand up meeting 12/8/2015
part 组员 今日工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 -------------- -- ----------- -- PDF Reader 朱玉影 ...
- JDBC 中的事务和批处理 batch
JDBC事务处理: 事务处理一般在事务开始前把事务提交设置为false 所有DML语句执行完成后提交事务 demo: package com.xzlf.jdbc; import java.sql.Co ...
- Inno Script - How to make “I Accept the Agreement” radio button on EULA page selected by Default
出处: https://stackoverflow.com/questions/11187022/inno-script-how-to-make-i-accept-the-agreement-radi ...
- IDEA设置导入主题样式皮肤,加入背景图片
主题下载地址:http://www.riaway.com/theme.php 里面有很多主题,看个人喜好,这里我用的Monokai Sublime Text 3. 导入主题打开IDEA,找到File ...
- 构造最短程序打印自身的 MD5
一,介绍 比赛题目很简单:构造一个程序,在 stdout 上打印出自身的 MD5,程序越短越好.按最终程序文件大小字节数排名,文件越小,排名越靠前. 只能使用 ld-linux-x86-64.so, ...
- QT bug ig9icd64.dll
QT bug ig9icd64.dll bugintel ig9icd64.dll 处有未经处理的异常 遇到了一个 奇奇怪怪的bug, 一般的QT程序中 在main.cpp 中初始化一个窗口进行显示后 ...
- CtsVerifier-Bluetooth-LE-SEcure-ClientServer-Test测试pass但是无法选择passbutton
[问题描述] CtsVerifier-Bluetooth-LE-SEcure-ClientServer-Test测试pass但是无法选择Pass-Button 工具版本:9.0-r11 其他信息: 上 ...
- 记坑: ConfigurationProperties 和 RefreshScope
为什么80%的码农都做不了架构师?>>> 当使用spring-cloud-config 和 spring-boot-configuration-processor时 使用bean ...
- MySQL5.7中InnoDB不可不知的新特性
讲师介绍 赖铮 Oracle InnoDB团队 Principle Software Developer 曾任达梦.Teradata高级工程师,主要负责研发数据库执行引擎和存储引擎,十年以商数据库内 ...
- 删除集群mds
2019独角兽企业重金招聘Python工程师标准>>> 删除cephfs文件系统步骤: 1.停掉服务端mds: #systemctl stop {mds_service} 2.将md ...