react--使用div编辑属性contenteditable渲染HTML标签

时间：2018-04-26 00:58:07 收藏：0 阅读：3425

输入的时候完全没有问题，但是在修改涉及到使用其渲染的时候，就会把字符串渲染出来，而不是渲染原生的标签对

渲染时要使用 dangerouslySetInnerHTML属性，并且传入对象进行渲染

render函数return部分：

　　　　　<div ref="add" contenteditable="true" className={styles.areaBox}></div>

        <button onClick={(e) => { this.test(e) }}></button>

        <div contenteditable="true" dangerouslySetInnerHTML={{__html: `${this.state.add}`}} className={styles.areaBox}></div>

方法部分：

 test = () => {
    this.setState({
      add: this.refs.add.innerHTML
    })
  }

状态部分：

 constructor(props) {
    super(props);

    this.state = {
      add: ""
    }

  }