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

听说这个单词这么长,是故意的,应为有可能不合时宜的使用innerHTML会导致XSS攻击(然而我并不懂什么是XSS),

__htlml: DOM;

通常dangerSetInnerHTML(这个糟糕的单词,,这么长。。)是和__html配套使用的,用来在一个标签中插入许多个标签(安全的插入);

通常写法:

var HelloMessge = React.createClass({
render: <div
dangerouslySetInnerHTML={{
__html: '<h3>hahhah</h3>'
}}>
</div>
})

当然既然可以插入DOM,也可以插入字符串。。

dangerouslySetInnerHTML={{
__html: 'hahahhahaha'
}}>

之所以是有2个{{}},是因为第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对

参考文献:

http://wiki.jikexueyuan.com/project/react/dangerously.html

http://www.cnblogs.com/shamgod/p/5052312.html

dangerouslySetInnerHTMl的更多相关文章

  1. 【原】dangerouslySetInnerHTML, 让React正常显示你的html代码

    昨天在弄一个让内容换行显示时,遇到一个问题,就是我有<br />的代码在页面中不换行,而是直接显示<br />,代码如下: <!DOCTYPE html> < ...

  2. React-非dom属性-dangerouslySetInnerHTML标签

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. React dangerouslySetInnerHTML - 将HTML字符串解析为html样式显示

    <div dangerouslySetInnerHTML={{ __html: curriculumDesc }}></div>

  4. React用dangerouslySetInnerHTML动态渲染HTML

    React用dangerouslySetInnerHTML动态渲染HTML React项目,需要把后台返回的一段html代码在页面上显示 在render获取内容, //在render里获取内容 con ...

  5. react中dangerouslySetInnerHTML使用

    在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示. 在显示时,将内容写入__html对象中即可.具体如下: <div dangerouslySetInner ...

  6. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  7. React项目(一):markdown编辑器

    在之前的React官网教程中,提到了用Remarkable为插件的markdown评论框.现在就来正儿八经地用另外一个插件marked.js做一个markdown编辑器吧! 准备工作 或许在做之前,应 ...

  8. React.js入门笔记(再续):评论框的实现

    本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...

  9. react学习与简介

    简介: React是Facebook开发的一款JS库 React解决了什么问题? 1).首先是以往mvc模式的缺陷,当代码库庞大时,mvc非常的复杂,每添加新的功能,项目的复杂度就几何倍的增长,导致代 ...

随机推荐

  1. c#二维码资料

    几个主要的C#二维码开发资料,用于学生的本科毕业论文参考 https://blog.csdn.net/xwnxwn/article/details/72636417 C# ZXing.Net生成二维码 ...

  2. 认识 Thymeleaf

  3. Monkey测试结果分析【转】

    转自[http://www.douban.com/note/257030241/] Monkey测试结果分析 一. 初步分析方法: Monkey测试出现错误后,一般的差错步骤为以下几步: 1. 找到是 ...

  4. puppet自动化运维

    Puppet实现自动化运维 一.案例分析 1.案例概述: 随着服务器数量的增多,系统管理员任务量也逐渐增加,这时就需要简洁的.强大的框架来完成系统管理任务为实现这一目的,我们将引入一批工具,这批工具是 ...

  5. centos7.5下yum 安装mariadb数据库

    前言 mariadb 和mysql就像亲兄弟的关系,各种语法.驱动啥的,在mysql上能上的,在mariadb上基本都可以直接使用.更多的细节在此不多说. 1.删除旧版本 centos7下默认安装有m ...

  6. 04_web基础(五)之cookie与session

    29.Http协议无记忆带来的问题 什么是会话:可简单理解为:用户开一个浏览器,访问某一个web站点,在这个站点点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一次会话. 在一 ...

  7. Eclipse 合并GIT分支

    合并GIT分支: 1.  切换到主分支: 2.  右击项目——Team——Merge…: 3.  在弹出的Merge框中选择要合并的分支——Merge: 4.  合并后如果出现冲突,右击项目——Tea ...

  8. OnContextMenu实现禁止鼠标右键

    OnContextMenu事件 定义和使用:oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单.注意:所有浏览器都支持 oncontextmenu 事件, contextmen ...

  9. burpsuite的使用(二)

    爬网 为了爬网更加顺畅,先关掉截断功能 先进行手动爬网 然后进到目标页面需要点的地方和输入的地方去操作一下,在spider下就能看到爬网的记录 自动爬网 当你爬网时需要登录身份验证时,提示输入,也可以 ...

  10. pta7-20 畅通工程之局部最小花费问题(Kruskal算法)

    题目链接:https://pintia.cn/problem-sets/15/problems/897 题意:给出n个城镇,然后给出n×(n-1)/2条边,即每两个城镇之间的边,包含起始点,终点,修建 ...