react中的dangerouslySetInnerHTML属性

例子

在react中，通过富文本编辑器进行操作后的内容，字符串中的html代码并不能正确展示:

保存在state中的数据：

如果我们直接使用保存在state中的content：

效果是这样的：

使用dangerouslySetInnerHTML以后：

效果如下：

dangerouslySetInnerHTML属性

作用：使字符串中的html代码解析为html样式。

使用方法

语法：

<组件名 dangerouslySetInnerHTML={{ __html: '<h1>你好呀</h1>' }}></组件名>

1. dangerouslySetInnerHTMl 是React组件的一个属性，类似于angular的ng-bind；
2. 有2个{}，第一个{}代表jsx语法开始，第二个{}是代表dangerouslySetInnerHTML接收的是一个对象键值对;
3. 既可以插入DOM，又可以插入字符串；
4. 不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的，以此来警告，它的 prop 值（ 一个对象而不是字符串 ）应该被用来表明净化后的数据。（可参考这篇）