如何在 React 中处理不同位置的多个模态？

Question

我正在使用 Next Js 创建一个投资组合网站。

我有一个工作部分，其中包含项目的屏幕截图。 它们交替放置在屏幕的左侧/右侧（请参阅随附的屏幕截图）。

我想要一个模式（解释项目、代码链接、使用的技术堆栈等），当单击特定项目的屏幕截图时，它会在屏幕截图 div 的中间弹出（如附图所示）。

但问题是，每个其他项目的模式也会被触发。 我只想弹出那个特定的模式。

点击截图之前：

点击截图后：

当页面中的所有模态都被触发时，我在另一个项目中遇到了类似的问题，但我可以通过使用箭头 function 传递模态内容数据来修复它，因为所有模态都在屏幕中央呈现。
但是为此，每个项目的模式定位不同。 我不确定如何将它们编码到位。

这是我的代码：

WorkItemsDesk.js

export const WorkItemsDesk = () => {
  const [showModal, setShowModal] = useState(false);
  const togglePopUp = () => setShowModal(!showModal);

  return (
    <div className="flex flex-col my-[100px] gap-[100px] z-10 ">
      {projects.map((project) => (
        <div
          key={project.title}
          onClick={() => togglePopUp()} //This is so the modal closes when clicked outside
          className="w-[1000px] z-20 hover:cursor-pointer relative bg-no-repeat bg-center bg-fixed bg-clip-border bg-contain h-[470px] flex justify-center items-center odd:ml-auto hover:shadow-2xl transition-all duration-300 ease-in-out"
          style={{
            background: `linear-gradient(0deg, rgba(4, 4, 4, 0.65), rgba(4, 4, 4, 0.65)), url(${project.image});`,
            backgroundClip: "border-box",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center",
            backgroundSize: "cover",
          }}
        >
          <h1 className="font-montserrat-extrabold text-[40px] text-light-text">
            {project.title}
          </h1>
          <WorkModalDesk project={project} showModal={showModal} />
        </div>
      ))}
    </div>
  );
};

WorkModalDesk.js

export const WorkModalDesk = ({
  project: { p1, p2, tech, sourceCode, liveDemo, buttons },
  showModal,
}) => {
  return (
    <div
      className={
        showModal
          ? "flex pt-[24px] absolute px-[30px] pb-[34px] bg-dark rounded-lg flex-col gap-[40px] max-w-[450px] "
          : "hidden"
      }
    >
      <p className="text-[18px] text-light-text font-montserrat">
        {p1}
        <span className="block mt-[28px]">{p2}</span>
      </p>
      .
      .
      .
      .
    </div>
  );
};

Answer 1

一次显示所有模态的原因是您有一个 state 来管理所有呈现的模态。

我建议将循环移到WorkItemDesk组件之外，如下所示：

export const WorkItemsDesk = () => {
  const [showModal, setShowModal] = useState(false);
  const togglePopUp = () => setShowModal((prev) => !prev);

  return (
    <div className="flex flex-col my-[100px] gap-[100px] z-10 ">
      <div
          onClick={() => togglePopUp()} //This is so the modal closes when clicked outside
          className="w-[1000px] z-20 hover:cursor-pointer relative bg-no-repeat bg-center bg-fixed bg-clip-border bg-contain h-[470px] flex justify-center items-center odd:ml-auto hover:shadow-2xl transition-all duration-300 ease-in-out"
          style={{
            background: `linear-gradient(0deg, rgba(4, 4, 4, 0.65), rgba(4, 4, 4, 0.65)), url(${project.image});`,
            backgroundClip: "border-box",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center",
            backgroundSize: "cover",
          }}
        >
          <h1 className="font-montserrat-extrabold text-[40px] text-light-text">
            {project.title}
          </h1>
          <WorkModalDesk project={project} showModal={showModal} />
        </div>
    </div>
  );
};

然后在WorkItemDesk的父组件中添加您的项目循环，如下所示：

export const Parent = () => (
  <>
   {projects.map((project) => (
        <WorkItemDesk key={project.title} />
      ))}
  </>
)