这是一个运行的代码沙盒：https ://codesandbox.io/s/rmxp8nxm74

为了能够通过映射数组来单独识别来自 JSX 的事件，您必须将标识符传递给调用的 openModal 方法：

  openModal = id => {
    this.setState({ openedModal: id });
  };
  closeModal = () => {
    this.setState({ openedModal: null });
  };

  render() {
    return this.state.DataBook.map((item, i) => (
      <div key={item.id}>
        <Button color="danger" onClick={() => this.openModal(item.id)}>
          test Modal
        </Button>
        <Modal
          isOpen={this.state.openedModal === item.id}
          toggle={this.closeModal}
        >
          <ModalHeader>Modal title</ModalHeader>
          <ModalBody>
            <b>{item.nom}</b>
            <br />
            Lorem ipsum
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.closeModal}>
              Do Something
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    ));
  }

编辑：我创建了不同的打开/关闭方法，因此您可以使用外部调用轻松关闭活动模式（无需传递参数）。

编辑 2 ：您还有一个替代选项：有一个单一的动态Modal传递给它一个状态集 onClick （性能可能更好，但更难在模态中管理不同的点击事件）

您可以activeModalIndex在您的状态中使用它来显示实际的模态。检查activeModalIndex打开模态的时间。

this.state.DataBook.map(function (item, index) {
 return ( 
   <div>
      <Button color="danger" onClick={() => this.toggleModal(index)}>test Modal</Button>
      <Modal isOpen={(this.state.activeModalIndex === index) && this.state.modal} toggle={()=> this.toggleModal(index)} className={this.props.className} external={externalCloseBtn}>
      ...
      </Modal>
   </div>

您可以切换模态

toggleModal(activeIndex) {
  this.setState({
    modal: !this.state.modal,
    activeModalIndex: activeIndex
  });
}

希望这可以帮助。