Javascript 如何在React中的现有DOM中追加或插入HTML元素

如何通过单击按钮在现有DOM（DOM中的任何元素）中追加或插入HTML元素？若附加了它，那个么在单击附加元素中的按钮后，如何填充尚未写入的内容呢？ 我知道在Jquery中这是小菜一碟，但这次我想做出反应来帮助我

下面是代码：我想在“编辑器”div中填充add

，并填充我将在单击按钮后编写的内容

任何帮助都将不胜感激

export default class App extends React.Component{
  constructor(props){
    super(props);

  }

  parargraph(e){
    const parargraph = '<p></p>';
    alert(parargraph);
  }

  render(){
    return(
      <div className={"editorHolder " + (this.props.active ? 'show' : '' )  } onClick={this.hideEditor}>
      <div className="editBar">
      <ul>
        <li><button onClick={this.parargraph}>Parargraph</button></li>
        <li><button>H1</button><button>H2</button><button>H3</button><button>H4</button><button>H5</button><button>H6</button></li>
        <li><button>Image</button></li>
        <li><button>Link</button></li>
        <li><button>List</button></li>
        <li><button>Audio</button></li>
        <li><button>Video</button></li>
      </ul>
      </div>
      <div className="editor">
      </div>
      </div>
    );
  }
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
}
平行图（e）{
常量参数图=“
”；
警惕（视距图）；
}
render（）{
返回(

平行描记器
H1H2H3H4H5H6
形象
链接
名单
音频
录像带

);
}
}

React提供了一种直接操作div的innerHTML的方法

退房

对于您的代码，请尝试以下操作：

export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      content: ''
    }
    this.paragraph = this.paragraph.bind(this)
  }

  paragraph(e){
    const paragraph = '<p></p>'
    let content = this.state.content
    content += paragraph
    this.setState({content})
  }

  render(){
    return(
      <div className={"editorHolder " + (this.props.active ? 'show' : '' )  } onClick={this.hideEditor}>
      <div className="editBar">
      <ul>
        <li><button onClick={this.paragraph}>Paragraph</button></li>
        <li><button>H1</button><button>H2</button><button>H3</button><button>H4</button><button>H5</button><button>H6</button></li>
        <li><button>Image</button></li>
        <li><button>Link</button></li>
        <li><button>List</button></li>
        <li><button>Audio</button></li>
        <li><button>Video</button></li>
      </ul>
      </div>
      <div className="editor" dangerouslySetInnerHTML={{__html: this.state.content}}>
      </div>
      </div>
    );
  }
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
内容：“”
}
this.paragration=this.paragration.bind（this）
}
（e）段{
常量段落='
'
让内容=this.state.content
内容+=段落
this.setState（{content}）
}
render（）{
返回(

段落
H1H2H3H4H5H6
形象
链接
名单
音频
录像带

);
}
}

说明：您希望保持编辑器的内容处于状态，以便在单击任何按钮时随时更改和附加更多内容。编辑器div将接收状态并在状态更改时更新其值

PS：在构造函数中绑定组件方法是一种很好的做法，我已经在示例代码中为您完成了绑定。

---

您还拼错了“段落”。

您应该发布您到目前为止尝试过的内容以及您遇到的困难。我想答案应该是一小段代码，添加我的代码可能会让这个问题变得混乱。谢谢帮助。有了这个，我可以将一个元素附加到DOM中，但是在附加的元素中填充书面数据仍然是无法控制的。