React中如何将函数接收的item值传递给Modal组件？

问题场景 #

你有一个ViewDetails点击事件处理函数，接收item参数，点击时会打印该item并触发模态框显示。现在需要把这个item的值传递给Main组件中渲染的Modal组件，让Modal内部可以使用item里的数据。

解决方案 #

核心思路是通过状态管理保存选中的item，再将状态作为props传递给Modal。具体步骤如下：

1. 在Main组件中添加状态存储选中的item
   使用React的useState钩子，新增状态变量保存当前选中的item，初始值设为null或空对象。

2. 修改ViewDetails函数，更新选中item的状态
   调用toggleModal打开模态框的同时，把当前点击的item存入状态。

3. 将选中的item作为props传递给Modal
   在Modal组件的props中加入item属性，值为创建的状态变量。

4. 在Modal组件中接收并使用item
   在Modal内部通过props获取item，直接使用其中的数据即可。

完整代码示例 #

Main组件修改后的代码

import { useState } from 'react';

const Main = () => {
  // 新增状态：存储选中的item
  const [selectedItem, setSelectedItem] = useState(null);
  const [modalStatus, setModalStatus] = useState(false);

  // 修改ViewDetails函数，更新selectedItem状态
  const ViewDetails = (item) => () => {
    console.log(item);
    setSelectedItem(item); // 保存当前item到状态
    toggleModal();
  };

  const toggleModal = () => {
    setModalStatus(prev => !prev);
    // 关闭模态框时清空选中的item（可选）
    if (modalStatus) {
      setSelectedItem(null);
    }
  };

  return (
    <Layout title="Dashboard" className="container-fluid">
      {/* 将selectedItem作为props传给Modal */}
      <Modal 
        open={modalStatus} 
        onClose={() => setModalStatus(false)} 
        item={selectedItem} 
      />
      <div className="row">
        <div className="col-sm-3">
          <UserLinks />
        </div>
        <div className="col-sm-9">
          <UserInfo />
          {orders ? <PurchaseHistory onViewDetails={ViewDetails} /> : ""}
          {/* 假设PurchaseHistory组件内会绑定ViewDetails到订单项的点击事件 */}
        </div>
      </div>
    </Layout>
  );
};

Modal组件示例（接收item并使用）

const Modal = ({ open, onClose, item }) => {
  if (!open || !item) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button onClick={onClose}>关闭</button>
        {/* 使用item中的数据 */}
        <h3>详情信息</h3>
        <p>ID：{item.id}</p>
        <p>名称：{item.name}</p>
        <p>详情：{item.description}</p>
      </div>
    </div>
  );
};

关键说明 #

• 关闭模态框时可选择清空selectedItem状态，避免下次打开模态框时残留旧数据。
• 如果item是复杂对象，确保传递的是引用正确的对象，避免直接修改原对象导致状态更新异常。

内容的提问来源于stack exchange，提问作者Sifat Hasan Wakib