如何向Modal组件传递对应Project的关联项目数据？

问题场景 #

当前点击Project组件能触发Modal显示，但无法将该Project对应的projectData条目数据传递给Modal组件，需要调整代码实现这一需求。

解决步骤 #

1. 新增状态存储选中项目
   替换原有的showModal状态，改用一个状态同时控制Modal显隐和存储选中的项目数据：

   // 替换原有的useState
   const [selectedProject, setSelectedProject] = useState(null);
   

2. 修改openModal与closeModal函数

   • openModal接收点击的项目条目，将其存入状态
   • closeModal清空选中状态以关闭Modal

   const openModal = (selectedItem) => {
     setSelectedProject(selectedItem);
   };
   
   const closeModal = () => {
     setSelectedProject(null);
   };
   

3. 给Modal组件传递选中数据
   通过selectedProject !== null判断是否显示Modal，同时将选中的项目数据作为props传入：

   {selectedProject && <Modal closeModal={closeModal} project={selectedProject} />}
   

修改后的完整Index组件代码 #

import { useState } from 'react';
import { projectData, responsive } from "../data/data";
import styles from './Index.module.css';

function Index() {
  const [selectedProject, setSelectedProject] = useState(null);

  const openModal = (selectedItem) => {
    setSelectedProject(selectedItem);
  };

  const closeModal = () => {
    setSelectedProject(null);
  };

  const project = projectData.map((item) => (
    <Project
      name={item.name}
      url={item.imageurl}
      key={item.id} // 建议用item.id作为key，比index更稳定
      openModal={() => openModal(item)}
    />
  ));

  return (
    <main className={styles.main}>
      <Navbar />
      <section className={styles.presentation} id="presentation">
        <div>
          <h2 className={styles.name}>david</h2>
          <h1 className={styles.title}>frontend developer</h1>
        </div>
        <p>blablabla</p>
        <Button content="découvrir" link="#projets" />
      </section>
      <section className={styles.projects__container} id="projets">
        <Carousel infinite={true} responsive={responsive}>
          {project}
        </Carousel>
      </section>
      <section id="skills"></section>
      {selectedProject && <Modal closeModal={closeModal} project={selectedProject} />}
    </main>
  );
}

export default Index;

在Modal组件中使用传递的数据 #

在Modal组件里，直接通过props读取选中的项目数据即可：

function Modal({ closeModal, project }) {
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h3>{project.name}</h3>
        <img src={project.url01} alt={`${project.name} 截图1`} />
        <img src={project.url02} alt={`${project.name} 截图2`} />
        <img src={project.url03} alt={`${project.name} 截图3`} />
        <button onClick={closeModal}>关闭</button>
      </div>
    </div>
  );
}

export default Modal;

内容的提问来源于stack exchange，提问作者Evil Dave