优化React组件：如何在弹出层中精确展示单个项目数据

// 原始 PopUp.js 片段
function PopUp(props) {
    return (props.trigger) ? (
        <div className='popup'>
            <div className='popup-inner'>
                <button className="close-btn" onClick={() => props.setTrigger(false)}>close</button>
                <h1>my pop up</h1>
                <div>
                    {/* 问题所在：直接遍历所有项目 */}
                    {allProjects.map((projectData, key) => {
                        return <PopUpContent key = {key} projectData={projectData} />;
                    })}
                </div>
            </div>
        </div>
    ) : "";
}

// PopUp.js (部分代码)
// ...
<div>
  {allProjects.map((projectData, key) => {
    return <PopUpContent key = {key} projectData={projectData} />;
  })}
</div>
// ...

// PopUp.js
import React from 'react';
import PopUpContent from './PopUpContent'; // 确保 PopUpContent 被正确导入
import './PopUp.css'; // 假设有对应的CSS文件

function PopUp(props) {
    // 当 trigger 为 false 时，不渲染 PopUp
    if (!props.trigger) {
        return null;
    }

    return (
        <div className='popup'>
            <div className='popup-inner'>
                <button className="close-btn" onClick={() => props.setTrigger(false)}>关闭</button>
                <h1>我的项目详情</h1>
                <div>
                    {/* 直接渲染通过 props 传递的特定项目数据 */}
                    {props.projectData ? ( // 检查 projectData 是否存在
                        <PopUpContent projectData={props.projectData} />
                    ) : (
                        <p>加载中或无数据...</p> // 可选：添加加载或无数据提示
                    )}
                </div>
            </div>
        </div>
    );
}

export default PopUp;

// ProjectCard.js (部分代码)
// ...
function ProjectCard({ projectData }) { // projectData 作为 prop 传入 ProjectCard
    const [buttonPopUp, setButtonPopUp] = useState(false);

    return (
        <div>
            {/* ... 其他项目卡片内容 ... */}
            <div>
                <button onClick={() => setButtonPopUp(true)}>Open</button>
                {/* 原始调用：未传递 projectData */}
                <PopUp trigger={buttonPopUp} setTrigger={setButtonPopUp}></PopUp>
            </div>
        </div>
    );
}
// ...

// ProjectCard.js (简化示例)
import React, { useState } from 'react';
import PopUp from './PopUp'; // 确保 PopUp 被正确导入

function ProjectCard({ projectData }) { // 假设 projectData 是从父组件传递给 ProjectCard 的
    const [buttonPopUp, setButtonPopUp] = useState(false);

    return (
        <div>
            <div>
                <p>查看 {projectData.call_to_view}</p>
            </div>
            <div>
                <button onClick={() => setButtonPopUp(true)}>打开详情</button>
                {/* 关键改动：将当前项目的 projectData 传递给 PopUp 组件 */}
                <PopUp
                    trigger={buttonPopUp}
                    setTrigger={setButtonPopUp}
                    projectData={projectData} // 将当前项目的 projectData 传递下去
                />
            </div>
        </div>
    );
}

export default ProjectCard;

// PopUpContent.js
import React from 'react';
import './PopUpContent.css'; // 假设有对应的CSS文件

function PopUpContent(props) {
    const { projectData } = props;

    // 建议：在渲染前检查 projectData 是否有效
    if (!projectData) {
        return <p>项目数据缺失。</p>;
    }

    return (
        <div>
            {/* 仅渲染当前项目的图片 */}
            <img src={projectData.image_detail1} alt={`${projectData.title} 详情图1`}/>
            <img src={projectData.image_detail2} alt={`${projectData.title} 详情图2`}/>
            <img src={projectData.image_detail3} alt={`${projectData.title} 详情图3`}/>
        </div>
    );
}

export default PopUpContent;

// data.js
export const allProjects = [
    {
        id: 1,
        company: "Australian Association",
        year: "2019",
        title: "Congress",
        type: "website, marketing collateral, signage",
        description: "Created pop-art themed assets...",
        image: "https://i.postimg.cc/CL2Q8PDn/Congress-ADA-mockup2.jpg",
        call_to_view: "assets",
        image_detail1: "https://fakeimg.pl/300x250?text=congress+image+1",
        image_detail2: "https://i.postimg.cc/CL2Q8PDn/Congress-ADA-mockup2.jpg",
        image_detail3: "https://i.postimg.cc/CL2Q8PDn/Congress-ADA-mockup2.jpg",
    },
    // ... 更多项目数据
];