如何将SupplierItemModal.jsx组件的id值传入CreateSupplierItemModal.jsx组件

下面是几种实用的实现方案：

方案一：父组件中转（最常用） #

如果两个模态框属于同一个父组件，直接通过父组件做中间层传递数据：

• 在父组件里定义状态selectedId和对应的更新方法
• 在SupplierItemModal中触发打开CreateSupplierItemModal时，把当前id传给父组件的更新方法
• 父组件再将selectedId作为props传给CreateSupplierItemModal

代码示例：

// 父组件
import { useState } from 'react';
import SupplierItemModal from './SupplierItemModal';
import CreateSupplierItemModal from './CreateSupplierItemModal';

function ParentComponent() {
  const [selectedId, setSelectedId] = useState(null);
  const [showCreateModal, setShowCreateModal] = useState(false);

  // 接收SupplierItemModal传来的id并打开创建模态框
  const openCreateModal = (id) => {
    setSelectedId(id);
    setShowCreateModal(true);
  };

  return (
    <>
      <SupplierItemModal onOpenCreate={openCreateModal} />
      {showCreateModal && (
        <CreateSupplierItemModal 
          itemId={selectedId} 
          onClose={() => setShowCreateModal(false)} 
        />
      )}
    </>
  );
}

// SupplierItemModal.jsx
function SupplierItemModal({ onOpenCreate }) {
  // 这里假设已经拿到当前项的id
  const currentItemId = 123;

  return (
    <button onClick={() => onOpenCreate(currentItemId)}>
      打开创建子项模态框
    </button>
  );
}

// CreateSupplierItemModal.jsx
function CreateSupplierItemModal({ itemId, onClose }) {
  return (
    <div className="modal">
      <p>从SupplierItemModal传来的id：{itemId}</p>
      <button onClick={onClose}>关闭</button>
    </div>
  );
}

方案二：Context API（跨多层组件） #

如果两个模态框层级较深，用Context API来共享数据更方便：

• 创建一个专门的Context来管理需要传递的id
• 在顶层组件中用Provider包裹，提供id的状态和更新方法
• 在两个模态框中直接消费这个Context

代码示例：

// ItemIdContext.js
import { createContext, useContext, useState } from 'react';

const ItemIdContext = createContext();

// 封装Provider和自定义Hook
export function ItemIdProvider({ children }) {
  const [selectedItemId, setSelectedItemId] = useState(null);

  return (
    <ItemIdContext.Provider value={{ selectedItemId, setSelectedItemId }}>
      {children}
    </ItemIdContext.Provider>
  );
}

export function useItemId() {
  return useContext(ItemIdContext);
}

// 根组件中包裹Provider
function App() {
  return (
    <ItemIdProvider>
      {/* 这里放你的组件树 */}
    </ItemIdProvider>
  );
}

// SupplierItemModal.jsx
import { useItemId } from './ItemIdContext';

function SupplierItemModal() {
  const { setSelectedItemId } = useItemId();
  const currentItemId = 123;

  const openCreateModal = () => {
    setSelectedItemId(currentItemId);
    // 这里添加打开CreateSupplierItemModal的逻辑
  };

  return <button onClick={openCreateModal}>打开创建模态框</button>;
}

// CreateSupplierItemModal.jsx
import { useItemId } from './ItemIdContext';

function CreateSupplierItemModal() {
  const { selectedItemId } = useItemId();

  return <div>接收的id：{selectedItemId}</div>;
}

方案三：URL参数（基于路由的模态框） #

如果CreateSupplierItemModal是路由组件，可以把id作为URL参数传递：

// SupplierItemModal.jsx
import { useNavigate } from 'react-router-dom';

function SupplierItemModal() {
  const navigate = useNavigate();
  const currentItemId = 123;

  const openCreateModal = () => {
    // 跳转到带id的路由
    navigate(`/create-supplier-item/${currentItemId}`);
  };

  return <button onClick={openCreateModal}>打开创建模态框</button>;
}

// CreateSupplierItemModal.jsx（路由组件）
import { useParams } from 'react-router-dom';

function CreateSupplierItemModal() {
  // 从URL参数中获取id
  const { id } = useParams();

  return <div>接收的id：{id}</div>;
}

// 路由配置示例
<Route path="/create-supplier-item/:id" element={<CreateSupplierItemModal />} />

内容的提问来源于stack exchange，提问作者Chamaka Mendis