Reactjs 在onClick函数中将组件附加到主体

我试图在点击触发器时将一个模态组件附加到文档体，但我认为我的语法是错误的

openModal() {
    console.log(this.state.isModalOpen);
    this.setState({ isModalOpen: true });
    $('body').append(
    <Modal isOpen={this.state.isModalOpen} transitionName="modal-anim">
      <NewAlbum onClick={this.closeModal}/>
    </Modal>
    )
  }
<button onClick={this.openModal}>Trigger</button>

openModal（）{
console.log（this.state.isModalOpen）；
this.setState（{isModalOpen:true}）；
$（'body'）。追加(
)
}
触发

是的，你错过了一些基本知识。您需要让React为您处理渲染。这是您追求的目标的典型用法：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isModalOpen: false }; 
    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal() {
    this.setState({ isModalOpen: !this.state.isModalOpen });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleModal}>Trigger</button>
        <Modal isOpen={this.state.isModalOpen} transitionName="modal-anim">
          <NewAlbum onClick={this.toggleModal}/>
        </Modal>
      </div>
    )
  }      
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={isModalOpen:false}； this.toggleModal=this.toggleModal.bind（this）； } toggleModal（）{ this.setState（{isModalOpen:！this.state.isModalOpen}）； } render（）{ 返回( 触发 ) } }

---

我强烈建议您阅读react文档并巩固一些基础：

是的，您错过了react的一些基础知识。您需要让React为您处理渲染。这是您追求的目标的典型用法：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isModalOpen: false }; 
    this.toggleModal = this.toggleModal.bind(this);
  }

  toggleModal() {
    this.setState({ isModalOpen: !this.state.isModalOpen });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleModal}>Trigger</button>
        <Modal isOpen={this.state.isModalOpen} transitionName="modal-anim">
          <NewAlbum onClick={this.toggleModal}/>
        </Modal>
      </div>
    )
  }      
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={isModalOpen:false}； this.toggleModal=this.toggleModal.bind（this）； } toggleModal（）{ this.setState（{isModalOpen:！this.state.isModalOpen}）； } render（）{ 返回( 触发 ) } }

---

我强烈建议您阅读react文档，并巩固一些基础：

谢谢。是的，我知道我有很大的缺陷，并且正在努力学习。我在toggleModal=（）=>上遇到了一个意想不到的标记错误。。。这应该只是切换模态（）{…}好的，您可能没有在第一阶段运行babel。我会更新我的答案。你用的是什么预设？谢谢。是的，我知道我有很大的缺陷，并且正在努力学习。我在toggleModal=（）=>上遇到了一个意想不到的标记错误。。。这应该只是切换模态（）{…}好的，您可能没有在第一阶段运行babel。我会更新我的答案。你用的是什么预设？