react--Render HTML tags using the div editable attribute contenteditable

There is no problem at all when inputting, but when the modification involves using its rendering, the string will be rendered instead of rendering the native tag pair

Use the dangerouslySetInnerHTML property when rendering, and pass in the object for rendering

 

The return part of the render function:

　　　　　<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>

 

Methods section:

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

 

Status section:

constructor(props) {
    super(props);

    this.state = {
      add: ""
    }

  }