react-dangerouslySetInnerHTML属性

dangerouslySetInnerHTML属性的功能实际上就是显示纯文本内容

import React from 'react';

class SetHtml extends React.Component {
  constructor(){
    super();
    this.state = {
      content:'<h1>标题名称</h1>'
    }
  }
   render() {
     return (
       <div>
          <div>
            {this.state.content}
          </div>

          <div dangerouslySetInnerHTML={{__html: this.state.content}} />

       </div>
     )
   }
}

export default SetHtml;

这里如果是直接this.state.content会把h1标签一起显示出来，所有这个时候就要用到dangerouslySetInnerHTML了，这样只显示内容不会显示标签

原理：

1.dangerouslySetInnerHTMl 是React标签的一个属性，类似于angular的ng-bind；

2.有2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

3.既可以插入DOM，又可以插入字符串；

4.不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的，以此来警告，它的 prop 值（ 一个对象而不是字符串 ）应该被用来表明净化后的数据。