如何在 React 中创建一个与用户单击的元素相对应的模式？

Question

我是 React 新手，但我正在尝试创建这样的功能，用户可以单击任何一个列出的个人资料卡，然后显示一个模式突出显示有关用户单击的相应卡的信息。

目前，我已经构建了模式的代码以及通过

{FounderList}

输出的个人资料卡列表。这些个人资料卡中的每一个都包含一个用于切换模式的按钮，但我还希望此按钮将信息传递给 Home.jsx 中

<Modal/>

的子级（请参阅 {ModalContent} 当前位于文件中的位置）有关用户点击的相应个人资料。

正如您在照片中看到的，例如，如果我单击“Mark Davis”，我的模态当前不包含任何信息，尽管我试图将该用户的索引传递给

<Modal/>

子级。我的理解是，这不起作用，因为内容立即呈现，而

ModalContent

保持未定义，但我不知道如何解决这个问题。这是另一个

useState

会派上用场的地方吗？我该如何实施？

Home.jsx

import React, { useState } from "react";

function Home() {
  // Modal Toggle
  const [isOpen, setIsOpen] = useState(false);

  // List of Founders
  const FounderPhotoList = [Founder1, Founder2, Founder3, Founder4];
  const FounderNameList = [
    "Mark Davis",
    "Emil Robinson",
    "David Kim",
    "Alice Nguyen",
  ];

  var ModalContent;

  let FounderList = FounderPhotoList.map((photo, index) => {
    return (
      <React.Fragment key={index}>
        <ContentCard>
          <img
            src={photo}
            className="object-cover object-center h-4/5 rounded-sm drop-shadow-lg"
          ></img>
          <button
            className="bg-green-100 hover:bg-green-300 font-bold drop-shadow-lg"
            onClick={() => {
              ModalContent = <p>{index}</p>;
              setIsOpen(true);
            }}
          >
            {FounderNameList[index]}
          </button>
        </ContentCard>
      </React.Fragment>
    );
  });

console.log(ModalContent);

  return (
    <>
        <PageCarousel>
          <Modal open={isOpen} onClose={() => setIsOpen(false)}>
            <ContentCard>
              {ModalContent}
            </ContentCard>
          </Modal>
          <TitleText>Meet the Founders</TitleText>
          <div className="grid grid-cols-2 grid-rows-2 gap-6 h-5/6 mt-4 w-5/6 mx-auto">
            {FounderList}
          </div>
        </PageCarousel>
    </>
  );
}

export default Home;

Modal.jsx

function Modal({ open, children, onClose }) {
  if (!open) return null;

  return (
    <>
        <div className="bg-black bg-opacity-40 fixed h-full w-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
          <div className="fixed h-4/5 w-4/5 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
            <p className="text-white">{children}</p>
            <button className="text-black font-bold bg-green-200 mt-2 text-xl align-text-top" onClick={onClose}>
            &nbsp; Exit &nbsp;
            </button>
          </div>
        </div>
    </>
  );
}

export default Modal;

Answer 1

您需要将单击的配置文件保存到 useState （设置后渲染组件），然后您可以在模态内容中使用它：

import React, { useState } from "react";

function Home() {
  // Modal Toggle
  const [isOpen, setIsOpen] = useState(false);
  const [profile, setProfile] = useState(undefined);    

  // List of Founders
  const FounderPhotoList = [Founder1, Founder2, Founder3, Founder4];
  const FounderNameList = [
    "Mark Davis",
    "Emil Robinson",
    "David Kim",
    "Alice Nguyen",
  ];

  var ModalContent;

  let FounderList = FounderPhotoList.map((photo, index) => {
    return (
      <React.Fragment key={index}>
        <ContentCard>
          <img
            src={photo}
            className="object-cover object-center h-4/5 rounded-sm drop-shadow-lg"
          ></img>
          <button
            className="bg-green-100 hover:bg-green-300 font-bold drop-shadow-lg"
            onClick={() => {
            setProfile([The data about the profile])
              setIsOpen(true);
            }}
          >
            {FounderNameList[index]}
          </button>
        </ContentCard>
      </React.Fragment>
    );
  });

console.log(ModalContent);

  return (
    <>
        <PageCarousel>
          <Modal open={isOpen} onClose={() => setIsOpen(false)}>
            <ContentCard>
              profile !== undefined && (
              <p>{profile.name}</p>
             )
            </ContentCard>
          </Modal>
          <TitleText>Meet the Founders</TitleText>
          <div className="grid grid-cols-2 grid-rows-2 gap-6 h-5/6 mt-4 w-5/6 mx-auto">
            {FounderList}
          </div>
        </PageCarousel>
    </>
  );
}

export default Home;

虽然我会说这种结构方式使其非常难以做到，但本质上您需要在单击配置文件时设置配置文件数据的状态，这样我们就可以在模式显示中使用它。您需要创建一些可以是创始人照片+数据（例如姓名）的东西，也许类似

 Founders = [{ photo: Founder1, name: "Mark Davis"}];

它变得极其简单

setProfile(founder); 

当您映射数组时