如何将React的DeleteWarehouseModal移至父组件并控制显示状态？

要把弹窗移到父组件渲染，核心是把弹窗的控制状态（show和状态更新方法）提升到父组件，再通过props把状态更新逻辑传递给子组件，具体操作如下：

1. 修改父组件，托管弹窗状态并渲染弹窗 #

将弹窗的show状态和setShow方法移到父组件中，同时在父组件内渲染弹窗组件：

function WarehouseComponent(props) {
  // 父组件托管弹窗的显示状态
  const [showModal, setShowModal] = useState(false);

  return (
    <section>
      <div>
          {/* 把打开弹窗的方法传给子组件 */}
          <WarehouseListItems 
            warehouseData={props.warehouseData} 
            onOpenModal={() => setShowModal(true)} 
          />
          {/* 在父组件中渲染弹窗 */}
          <DeleteWarehouseModal show={showModal} />
      </div>
    </section>
  );
}

2. 修改子组件，调用父组件传递的方法 #

子组件不再维护弹窗的状态，直接调用父组件通过props传来的方法触发弹窗显示：

function WarehouseListItem(props) {
  // 移除子组件内部的show状态

  return (
     <>
       {/* 项目原有业务代码 */}
        <Link>
          {/* 点击时调用父组件的方法打开弹窗 */}
          <div onClick={props.onOpenModal}></div>
        </Link>
       {/* 移除子组件内的弹窗渲染代码 */}
     </>
  );
}

3. 弹窗组件保持不变 #

你的DeleteWarehouseModal组件逻辑无需修改，它依然通过props.show控制显示隐藏：

const DeleteWarehouseModal = (props) => {
  if (!props.show) {
    return null;
  }
  return (
    // 弹窗原有元素
  );
};

补充：多列表项区分弹窗数据的场景 #

如果列表中有多个仓库项，点击不同项需要弹窗对应的数据，可在父组件额外维护选中的仓库ID，调整如下：

父组件：

function WarehouseComponent(props) {
  const [showModal, setShowModal] = useState(false);
  const [selectedWarehouseId, setSelectedWarehouseId] = useState(null);

  // 打开弹窗时记录选中的仓库ID
  const handleOpenModal = (warehouseId) => {
    setSelectedWarehouseId(warehouseId);
    setShowModal(true);
  };

  return (
    <section>
      <div>
          <WarehouseListItems 
            warehouseData={props.warehouseData} 
            onOpenModal={handleOpenModal} 
          />
          <DeleteWarehouseModal 
            show={showModal} 
            warehouseId={selectedWarehouseId}
            onClose={() => setShowModal(false)}
          />
      </div>
    </section>
  );
}

子组件：

function WarehouseListItem(props) {
  const warehouse = props.warehouse; // 假设每个列表项接收单个仓库数据

  return (
     <>
       {/* 项目原有业务代码 */}
        <Link>
          <div onClick={() => props.onOpenModal(warehouse.id)}></div>
        </Link>
     </>
  );
}

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