React组件中如何将项目数据传递至模态框

核心思路是在Projects组件中通过状态管理来关联点击的项目和模态框内容，具体步骤和代码示例如下：

1. 在Projects组件中维护关键状态 #

需要两个状态变量：

• selectedProject：存储当前点击的项目完整数据
• isModalOpen：控制模态框的显示/隐藏

2. 给列表项绑定点击事件 #

遍历项目列表时，给每个项添加点击事件，触发时将当前项目数据存入selectedProject，同时打开模态框。

如果你的项目列表是通过props.children传递的子元素，可通过React.Children.map和React.cloneElement为子项绑定事件：

import { useState } from 'react';
import ProjectModal from './ProjectModal';

function Projects({ children }) {
  const [selectedProject, setSelectedProject] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleProjectClick = (project) => {
    setSelectedProject(project);
    setIsModalOpen(true);
  };

  // 为每个子项目项绑定点击事件
  const projectItems = React.Children.map(children, child => {
    return React.cloneElement(child, {
      onClick: () => handleProjectClick(child.props.project),
    });
  });

  return (
    <div>
      {projectItems}
      <ProjectModal
        isOpen={isModalOpen}
        project={selectedProject}
        onClose={() => setIsModalOpen(false)}
      />
    </div>
  );
}

如果是直接在组件内部遍历项目数组，写法更直接：

import { useState } from 'react';
import ProjectModal from './ProjectModal';

function Projects({ projects }) {
  const [selectedProject, setSelectedProject] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleProjectClick = (project) => {
    setSelectedProject(project);
    setIsModalOpen(true);
  };

  return (
    <div>
      <ul>
        {projects.map(project => (
          <li key={project.id} onClick={() => handleProjectClick(project)}>
            {project.title}
          </li>
        ))}
      </ul>
      <ProjectModal
        isOpen={isModalOpen}
        project={selectedProject}
        onClose={() => setIsModalOpen(false)}
      />
    </div>
  );
}

3. 模态框组件根据状态渲染内容 #

模态框接收isOpen、project和关闭事件，根据这些props控制显示和渲染对应项目详情：

function ProjectModal({ isOpen, project, onClose }) {
  // 未打开或无选中项目时不渲染
  if (!isOpen || !project) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button onClick={onClose}>关闭</button>
        <h2>{project.title}</h2>
        <p>{project.description}</p>
        {/* 渲染更多项目详情字段 */}
      </div>
    </div>
  );
}

关键说明 #

• 所有状态集中在Projects组件管理，确保点击事件和模态框数据同步
• 通过setSelectedProject将点击的项目数据存入状态，模态框直接读取该状态即可展示对应内容
• 关闭模态框时只需重置isModalOpen状态，无需额外清理项目数据（下次点击会自动覆盖）

内容的提问来源于stack exchange，提问作者Felipe Cristiano