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. java解决查找问题

    1.给定一个字符串,找到里面的大写字母和小写字母以及其他字母的个数: 代码: package test; public class Stringclass { public static void m ...

  2. JS简单示例

    首先感谢海棠学院提供的优质视频资源 学习总是一个由简单到难的过程,由浅入深,一步一个脚印,将学过的点玩的深入一点,才能有所进步,单学习总是枯燥而乏味的,切忌焦躁; 示例代码另存放在github:htt ...

  3. Arcgis Runtime 100.3开发实例源代码调试日志

    Arcgis Runtime 100.3开发实例源代码调试日志 路径: "D:\arcgis runtime1003\arcgis-runtime-samples-dotnet-master ...

  4. C# WCF初识

    原文:http://www.cnblogs.com/artech/archive/2007/02/26/656901.html 方式1: 需引用 System.ServiceModel namespa ...

  5. spring 改变url

    server:  port: 9010  servlet:    context-path: /console

  6. 04_web基础(三)之进一步理解web

    08.BS和CS与Tomcat详细介绍 1.cs与bs架构的简介及区别 CS和BS是软件架构模式:C/S: Client/Server :客户端/服务端架构:B/S: Browser/Server:浏 ...

  7. python文件操作 二

    问题:在传输的时候对方不知道是以什么格式传给用户,传来传去彼此都忘了什么格式: 在编码的时候:utf8:是3个字符,gbk是2个字符,每个字符数字对应的字符,一段2进制串,如果10个字节全部都是中文, ...

  8. 解题9(StringReversedOrder)

    题目描述 将一个英文语句以单词为单位逆序排放.例如“I am a boy”,逆序排放后为“boy a am I”所有单词之间用一个空格隔开,语句中除了英文字母外,不再包含其他字符 接口说明 /** * ...

  9. python 文件操作: 文件操作的函数, 模式及常用操作.

    1.文件操作的函数: open("文件名(路径)", mode = '模式', encoding = "字符集") 2.模式: r , w , a , r+ , ...

  10. thymeleaf 获取sessionid

    参考https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html ${#session.id}