React中如何在兄弟组件间传递仓库名称至删除模态框？

问题（中文翻译） #

我把包含对象数组的props传给子组件，在子组件里映射渲染每个对象，每个对象都有name键。每个渲染的对象旁边有个可点击的图片，点击后会弹出模态框，我希望模态框里的文本能动态显示对应对象的name值。我猜需要把这个值作为状态传到父组件，再传给模态框？现有组件代码如下，请问怎么把props.item.name传递给DeleteWarehouseModal组件？

解决方案 #

核心思路是在父组件WarehouseList中维护当前要删除的仓库名称状态，点击删除按钮时把对应名称传递给父组件，再由父组件传给模态框。具体修改步骤如下：

1. 修改父组件 WarehouseList

新增状态存储选中的仓库名称，同时更新toggleShow函数接收并设置该名称：

function WarehouseList(props) {
  const [show, setShow] = useState(false);
  // 新增状态：存储当前要删除的仓库名称
  const [selectedWarehouseName, setSelectedWarehouseName] = useState('');

  // 修改toggleShow，接收仓库名称参数
  const toggleShow = (warehouseName) => {
    setSelectedWarehouseName(warehouseName);
    setShow((state) => !state);
  };

  return (
    <section>
          <WarehouseListItems
            warehouseData={props.warehouseData}
            toggleShow={toggleShow}
          />
          <DeleteWarehouseModal
            onClose={() => {
              setShow(false);
              // 关闭时清空选中的名称，避免残留旧数据
              setSelectedWarehouseName('');
            }}
            show={show}
            // 把选中的仓库名称传给模态框
            warehouseName={selectedWarehouseName}
          />
    </section>
  );
}

2. 修改 WarehouseListItem 组件

点击删除按钮时，调用toggleShow并传入当前仓库的name：

function WarehouseListItem(props) {
  const { toggleShow, item } = props;

  return (
    <div>
      <div>
        <div>
          <div>WAREHOUSE</div>
          <Link to={`/warehouses/${item.name}`}>
            <div>
              {item.name}
            </div>
          </Link>
        </div>
        <Link>
          <div
            onClick={() => toggleShow(item.name)}
          ></div>
        </Link>
      </div>
    </div>
  );
}

3. 修改 DeleteWarehouseModal 组件

接收warehouseName属性，替换文本中的动态占位符：

const DeleteWarehouseModal = (props) => {
  if (!props.show) {
    return null;
  }
  const { warehouseName } = props;
  return (
    <div>
      <div>
        <div>
          <div>
            <img
              src={closeIcon}
              alt="Close pop-up icon"
              onClick={props.onClose}
            ></img>
            <h3>
              Delete {warehouseName} warehouse?
            </h3>
          </div>
          <div>
            <p>
              {`Please confirm that you’d like to delete the ${warehouseName} from the list
            of warehouses. You won’t be able to undo this action.`}
            </p>
          </div>
          <div>
            <button
              onClick={props.onClose}
            >
              Cancel
            </button>
            <button>Delete</button>
          </div>
        </div>
      </div>
    </div>
  );
};

补充说明

• WarehouseListItems 组件无需修改，它仅负责将toggleShow函数传递给子项即可。
• 关闭模态框时清空selectedWarehouseName，避免下次打开模态框时显示旧数据。

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