我正在使用下一個(gè)Js創(chuàng)建一個(gè)投資組合網(wǎng)站。

我有一個(gè)由項(xiàng)目截圖組成的工作部分。這些按鈕交替放置在屏幕的左側(cè)/右側(cè)(參見隨附的屏幕截圖)。

我想有一個(gè)模態(tài)(解釋項(xiàng)目，代碼鏈接，使用的技術(shù)棧等)，當(dāng)一個(gè)特定的項(xiàng)目的截圖被點(diǎn)擊時(shí)，在截圖div(像在附加的圖片)中間彈出。

但問題是，每個(gè)其他項(xiàng)目的模式也會被觸發(fā)。我只想彈出那個(gè)特定的模態(tài)。

點(diǎn)擊截圖前:

點(diǎn)擊截圖后:

在另一個(gè)項(xiàng)目中，當(dāng)頁面中的所有模態(tài)都被觸發(fā)時(shí)，我遇到了類似的問題，但是我可以通過使用箭頭函數(shù)傳遞模態(tài)內(nèi)容數(shù)據(jù)來解決這個(gè)問題，因?yàn)樗心B(tài)都呈現(xiàn)在屏幕的中央。 但是對于這一點(diǎn)，每個(gè)項(xiàng)目的模態(tài)的位置是不同的。我不知道如何把它們編碼到位。

這是我的代碼:

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>
  );
};

一次顯示所有模態(tài)的原因是，您有一個(gè)單一的狀態(tài)來管理所有呈現(xiàn)的模態(tài)。

我建議將循環(huán)移到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的父組件中添加項(xiàng)目循環(huán)，如下所示:

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