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非常的复杂,每添加新的功能,项目的复杂度就几何倍的增长,导致代 ...
随机推荐
- [福大2018高级软工教学]团队Alpha阶段成绩汇总
一.作业地址: https://edu.cnblogs.com/campus/fzu/AdvancedSoftwareEngineerning2018/homework/2396 https://ed ...
- 译:SQL Server的Missing index DMV的 bug可能会使你失去理智---慎重看待缺失索引DMV中的信息
注: 本文译自https://www.sqlskills.com/blogs/paul/missing-index-dmvs-bug-that-could-cost-your-sanity/ 原文作者 ...
- linux网卡桥接问题与docker网卡桥接问题
一.linux网卡桥接问题 在linux上创建桥接网卡,与真实的物理网卡进行绑定,相当于在linux中创建了一个虚拟的交换机,以linux网卡地址为源地址的数据,从桥接网卡br0进入,从实际的物理网卡 ...
- 电子表格Excel
电子表格Excel 本次课内容一.认识下Excel1.扩展名 office2007以前,扩展名是xls office2007,扩展名是xlsx 2.文件扩展名是xls或xlsx的文件,excel电子表 ...
- 传输层——TCP报文头介绍
16位源端口号 16位目的端口号 32位序列号 32位确认序列号 4位头部长度 保留6位 U R G A C K P S H R S T S Y N F I N 16位窗口大小 16位检验和 16位紧 ...
- C#中让WebBrowser运行Javascript脚本
C#中可以让Webbrowser运行Javascript脚本来实现各种自动化操作,比如点击网页上的按钮,输入用户名密码等等.代码也很简单: >>>>>>>&g ...
- rename批量修改文件并在后缀前加字段
rename 's/\.jpg$/generate_badu\.jpg/' * 其中,'.'需要加转义斜杠'\', '*'代表文件夹下所有文件
- Excel 整个列数字转换成文本
选中该列----数据---分列----下一步---到步骤三----列数据格式---勾选"文本"---完成.
- Java的学习01
记录每天的学习情况.加油. /** * 测试包装类 * @author 小白 * */ public class TestWrappedClass { public static void main( ...
- c#批量更新list对象sql
注意: 1.语句中"set "后有空格, 2.最后一个if一定有值,且接连的sql字段 无 逗号 3.parameterList.Clear(); /// <summary ...