reactjs - React - 循环：将数据传递给 Modal 组件

Question

我对 React 很陌生，我正在玩 Gatsby。

我想显示一个团队成员列表，当单击一个时，更多详细信息应以模式（react-modal）显示。收集我的数据，然后循环遍历它并为每个成员创建一个模式（基于https://codepen.io/claydiffrient/pen/pNXgqQ ）。但是，我无法弄清楚如何将所有数据传递给模态。

我现在拥有的（简化）：

import React from "react";
import Modal from "react-modal";

export default class Team extends React.Component {
  constructor() {
    super();
    this.state = {
      showModal: false,
    };

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

  handleOpenModal = (member) => {
    this.setState({
      showModal: true,
      memberDetail: member,
    });
  };

  handleCloseModal() {
    this.setState({ showModal: false });
  }

  render() {
    return (
      <>
        {this.props.data &&
          this.props.data.map(({ node: member }) => (
            <div key={member.frontmatter.title}>
              <h3
                dangerouslySetInnerHTML={{
                  __html: member.frontmatter.title,
                }}
              ></h3>

              <button
                onClick={() =>
                  this.handleOpenModal(`${member.frontmatter.title}`)
                }
              >
                Details
              </button>
            </div>
          ))}
        <Modal
          isOpen={this.state.showModal}
          contentLabel="Modal"
          onRequestClose={this.handleCloseModal}
        >
          {this.state.memberDetail}
          <button onClick={this.handleCloseModal}>Close Modal</button>
        </Modal>
      </>
    );
  }
}

这似乎工作正常。但是，现在我想让所有成员数据对 Modal 可用。而这我想不通。数据来自 Markdown 文件，如下所示：

---
title: Some title
subTitle: some subtitle
mainImage: /images/team/hello.jpg
sequence: 20
---

Some markdown text here.

可能与如何使用反应将数据传递给模态有关。编辑还是删除？但我不确定（不能让它与那里的信息一起工作）。

标签： reactjsreact-modal