Javascript 在地图中显示子模式的最佳方式？

链接到项目：

我有

App.js

和

PageFive.js

App.js

包含一个数组：

state = {
    boxes: [
      {
        cbIndex: "cb1",
        name: "Bob"
      },
      {
        cbIndex: "cb2",
        name: "Daniel"
      },...

…和

PageFive.js

包含一个显示框的映射函数：

{this.props.boxes.map((box, id, image, moduleId) => (
            <div key={id} className="col-md-6 col-lg-4">
              <div className="sample-container">
                <div className="container">
                 <div className="row">
                  <div className="col-md-12">
                    <ul>
                      <li>
                        <input
                          type="checkbox"
                          id={box.cbIndex}...

按钮和模式的JSX，嵌套在上面的映射函数中：

<Button color="danger" onClick={this.toggle.bind(this, moduleId)}>
{this.props.buttonLabel}
</Button>
<Modal
isOpen={this.state.modal}
toggle={this.toggle.bind(this, moduleId)}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>
    <p>hi </p>
</ModalHeader>
<ModalBody>
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.
</ModalBody>
<ModalFooter>
    <Button color="primary" onClick={this.toggle}>
    Do Something
    </Button>{" "}
    <Button
    color="secondary"
    onClick={this.toggle}
    >
    Cancel
    </Button>
</ModalFooter>

{this.props.buttonLabel}
嗨

洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
再见，请暂时离开
这是一个巨大的挑战。
做点什么
{" "}
取消

---

有没有一种方法可以在不使用portals或Redux的情况下执行此操作？

与其在状态中使用true或false来切换模态，不如使用模态id来跟踪打开的模态。我已经编辑了您的项目签入

在您的框对象中为每个框添加一个属性，以存储模式显示并根据该属性切换模型。@suhailc谢谢。你能提供一个你的意思的例子吗？你能在这里复制你的应用程序吗@suhailc在这里！编辑您的项目。现在检查一下。没有使用我上面提到的方法，而是使用另一种方式切换@bunnycode

<Button color="danger" onClick={this.toggle.bind(this, moduleId)}>
{this.props.buttonLabel}
</Button>
<Modal
isOpen={this.state.modal}
toggle={this.toggle.bind(this, moduleId)}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>
    <p>hi </p>
</ModalHeader>
<ModalBody>
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.
</ModalBody>
<ModalFooter>
    <Button color="primary" onClick={this.toggle}>
    Do Something
    </Button>{" "}
    <Button
    color="secondary"
    onClick={this.toggle}
    >
    Cancel
    </Button>
</ModalFooter>