Twitter bootstrap 反应自举多模态

我正在我的项目中使用React引导。 我需要打开多个对话框。 有没有办法做到这一点

注: 对于引导有答案，但在react引导中不起作用。

---

谢谢。

这取决于你想实现什么目标。我有多个react引导模式对话框，也有嵌入式对话框，比如模式对话框显示带有错误消息的弹出窗口。 通常，您可以定义状态变量，如下所示：

this.state = {showModal1:true, showModal2:false,...}

render() {
    return(
       <div>
           <Modal show={this.state.showModal1}>
              some modal 1 text comes here
           </Modal>
           <Modal show={this.state.showModal2}>
              some modal 2 text comes here
           </Modal>
       </div>
     );
}

在渲染函数中，可以执行以下操作：

this.state = {showModal1:true, showModal2:false,...}

render() {
    return(
       <div>
           <Modal show={this.state.showModal1}>
              some modal 1 text comes here
           </Modal>
           <Modal show={this.state.showModal2}>
              some modal 2 text comes here
           </Modal>
       </div>
     );
}

render（）{
返回(
这里有一些模态1文本
这里有一些模态2文本
);
}

---

在上面的代码中，如果showModal1和showModal2都为true，您将得到两个模态对话框，并且第二个对话框将位于第一个对话框之上。

我使用了多个这样的模型

render() {
    return(
       <div>
           <button onClick={() => this.setState({ showModal1:true, showModal2:false});} >open modal one</button>

          <button onClick={() => this.setState({ showModal2:true, showModal1:false});} >open modal two</button>

          <Modal show={this.state.showModal1} onHide={() => this.setState({ showModal1:false});}>
           modal one content..
          </Modal>

          <Modal show={this.state.showModal2} onHide={() => this.setState({ showModal2:false});}>
          modal two content..
       </Modal>

     </div>
   );
}

render（）{
返回(
this.setState（{showModal1:true，showModal2:false}）；}>打开模式一
this.setState（{showModal2:true，showModal1:false}）；}>打开模式二
this.setState（{showModal1:false}）；}>
模式一内容。。
this.setState（{showModal2:false}）；}>
模式二内容。。
);
}

我们只是处理了多个模态，每个过程都有不同的id，然后将“show”状态设置为：

类应用程序扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.handleShow=this.handleShow.bind（this）；
this.handleClose=this.handleClose.bind（this）；
此.state={
显示：空
};
}
handleClose（）{
this.setState（{show:id}）；
}
handleShow（id）{
this.setState（{show:id}）；
}
render（）{
返回(
this.handleShow（'here'）}>
你来了！