dangerouslySetInnerHTMl
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的更多相关文章
- 【原】dangerouslySetInnerHTML, 让React正常显示你的html代码
昨天在弄一个让内容换行显示时,遇到一个问题,就是我有<br />的代码在页面中不换行,而是直接显示<br />,代码如下: <!DOCTYPE html> < ...
- React-非dom属性-dangerouslySetInnerHTML标签
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- React dangerouslySetInnerHTML - 将HTML字符串解析为html样式显示
<div dangerouslySetInnerHTML={{ __html: curriculumDesc }}></div>
- React用dangerouslySetInnerHTML动态渲染HTML
React用dangerouslySetInnerHTML动态渲染HTML React项目,需要把后台返回的一段html代码在页面上显示 在render获取内容, //在render里获取内容 con ...
- react中dangerouslySetInnerHTML使用
在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示. 在显示时,将内容写入__html对象中即可.具体如下: <div dangerouslySetInner ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React项目(一):markdown编辑器
在之前的React官网教程中,提到了用Remarkable为插件的markdown评论框.现在就来正儿八经地用另外一个插件marked.js做一个markdown编辑器吧! 准备工作 或许在做之前,应 ...
- React.js入门笔记(再续):评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
- react学习与简介
简介: React是Facebook开发的一款JS库 React解决了什么问题? 1).首先是以往mvc模式的缺陷,当代码库庞大时,mvc非常的复杂,每添加新的功能,项目的复杂度就几何倍的增长,导致代 ...
随机推荐
- python实现排序算法二:归并排序
##归并排序 ##基本思想:对于两个排好序的数组A和B,逐一比较A和B的元素,将较小值放入数组C中,当A或者B数组元素查询完后,将A或者B剩余的元素直接添加到C数组中,此时C数组即为有序数组,这就是归 ...
- JAVAWEB 一一 Spirng(框架,IOC控制反转,DI依赖注入)
jar包 applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <bea ...
- (转)如何禁用Windows 10系统的触摸屏
https://baijiahao.baidu.com/s?id=1593890738706748667 现在许多优质的Windows 10个人电脑都配备了触摸屏,因为触摸屏的日益普及,Windows ...
- Pandas数据排序
Pandas数据排序 .sort_index() 在指定轴上根据索引进行排序,索引排序后内容会跟随排序 b = pd.DataFrame(np.arange(20).reshape(4,5),inde ...
- Java中for循环中的的try-catch
异常处理 当for循环遇上try-catch @Test public void forThrow(){ final int size = 6; for (int i=0; i<size; i+ ...
- MySQL可以通过phpmyadmin连接,但是无法通过SqlYog(Windows)或Sequel Pro(Mac)下进行远程连接
更改数据库密码: update user set password=passworD("sunjingyu0509!") where user='root'; flush priv ...
- gdb 常用调试命令
1. file quit 2. frame bt 3. finish 运行程序,直到当前函数完成返回,并打印函数返回时的堆栈地址和返回值及参数信息. until 当要退出在一个循环体 ...
- ivew 表格中的input数据改变就会失去焦点
主要有两种解决办法: 1.创建一个临时空数组创建一个临时空数组,render内操作的是这个空数组内的对象,然后监听这个临时空数组,在赋值给table组件的data,render内操作的是这个空数组内的 ...
- new.target
[new.target] The new.target property lets you detect whether a function or constructor was called us ...
- MONGO的简单语法,新手实用
window上启动方式:(简单略) mongod --dbpath E:\study_lib\mongodb\db --port=27000 show dababases; (创建配置文件的启动方式) ...