从可以单独打开和关闭的循环内部创建多个模态

Question

我正在遍历一个数组，显示项目。当用户单击其中一项时，我希望打开一个模式，其中包含有关该项目的更具体数据。事实证明，我发现这出奇地困难。 您可以查看我的两种方法或跳过它们。我只是将它们包括在内以展示我的尝试。 基本上，我想要做的是让模态对应于数组中的每个项目并保存相应的数据。

第一种方法（失败）

最初，我试过这个：

        const [isModalOpen, setModalOpen] = useState(false);

        data.articles.map((article, i) => {
          return (
            <div
              key={article.id}
            >
              <button
                onClick={() => {
                  setModalOpen(true);
                }}
              >
                Let's go
              </button>
              }
            </div>
          {isModalOpen && <Modal> {article.author.lastName} </Modal>
          );

Modal 的代码为：

const Modal = ({ children, isOpen, ..props }) => {

  return (
    <ModalWrapper isOpen={isOpen} {...props}>
      {children}
    </ModalWrapper>
  );
};

export default Modal;

这是行不通的，因为循环中所有模态框的状态都会切换，所以它们会同时打开，效果是这样的只有我列表中的最后一项是打开的（因为它们都是重叠的）。

第二种方法（失败）

然后我尝试了这个：

        data.articles.map((article, i) => {
          return (
            <div
              key={article.id}
            >
              <button
                onClick={() => {
                  openModal(article);
                }}
              >
                Let's go
              </button>
              }
            </div>
          );

在这里我尝试打开模式：

  const openModal = (article) => {
    alert(article.author.name);
    return (
      <div
        style={{
          position: "absolute",
          width: "500px",
          height: "500px",
          zIndex: "5",
          backgroundColor: "red",
        }}
      >
        Hello from Modal
      </div>
    );
  };

这里的 alert() 有效，但是没有显示模态框，我猜它没有正确连接到 React/JSX 层次结构中？

问题：

我怎么想错了？非常感谢您的帮助。

Answer 1

您应该创建一个单独的组件来控制模态。

看看这个：https://codesandbox.io/s/great-johnson-cmys3

从可以单独打开和关闭的循环内部创建多个模态

Creating Multiple Modals from inside a Loop that can be toggled on & off individually

javascript

loops

modal-dialog

jsx

reactjs

第一种方法（失败）

第二种方法（失败）

问题：