如何从孙组件LeftFilter向父组件UserList传值并更新子组件DataGrid

针对组件树UserList（父）→DataGrid（子）→FilterModal→LeftFilter（孙）的状态传递需求，核心是通过props逐层传递回调函数，让孙组件触发父组件的状态更新逻辑，具体实现如下：

1. 父组件：UserList #

在父组件中定义原始数据、过滤后的状态，以及接收孙组件过滤参数并执行过滤的回调函数，再将回调和过滤后的数据传递给子组件DataGrid。

function UserList() {
  // 原始用户数据
  const [originalUsers, setOriginalUsers] = useState([
    { id: 1, name: "张三", age: 25 },
    { id: 2, name: "李四", age: 30 },
    { id: 3, name: "王五", age: 22 }
  ]);
  // 过滤后的用户数据状态
  const [filteredUsers, setFilteredUsers] = useState(originalUsers);

  // 接收孙组件传递的过滤参数，执行过滤逻辑
  const handleFilterChange = (filterParams) => {
    // 根据实际需求编写过滤逻辑，示例为按年龄范围过滤
    const result = originalUsers.filter(user => {
      return user.age >= filterParams.minAge && user.age <= filterParams.maxAge;
    });
    setFilteredUsers(result);
  };

  return (
    <>
      {/* 传递过滤后的数据和回调函数给DataGrid */}
      <DataGrid users={filteredUsers} onFilterChange={handleFilterChange} />
    </>
  );
}

2. 子组件：DataGrid #

接收父组件传递的回调函数，再将其传递给下一层的FilterModal组件。

function DataGrid({ users, onFilterChange }) {
  return (
    <>
      {/* 渲染用户列表表格 */}
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {/* 传递回调函数给FilterModal */}
      <FilterModal onFilterChange={onFilterChange} />
    </>
  );
}

3. 中间组件：FilterModal #

接收上一层传递的回调函数，继续传递给孙组件LeftFilter。

function FilterModal({ onFilterChange }) {
  return (
    <>
      <div className="filter-modal">
        {/* 传递回调函数给LeftFilter */}
        <LeftFilter onFilterChange={onFilterChange} />
      </div>
    </>
  );
}

4. 孙组件：LeftFilter #

定义自身的过滤状态，在状态变化时调用父组件传递的回调函数，将过滤参数传递回去。

function LeftFilter({ onFilterChange }) {
  // 孙组件自身的过滤状态，示例为年龄范围
  const [minAge, setMinAge] = useState(0);
  const [maxAge, setMaxAge] = useState(100);

  // 输入变化时触发回调，传递过滤参数
  const handleInputChange = () => {
    onFilterChange({ minAge: Number(minAge), maxAge: Number(maxAge) });
  };

  return (
    <>
      <div className="left-filter">
        <div>
          <label>最小年龄：</label>
          <input
            type="number"
            value={minAge}
            onChange={(e) => setMinAge(e.target.value)}
            onBlur={handleInputChange}
          />
        </div>
        <div>
          <label>最大年龄：</label>
          <input
            type="number"
            value={maxAge}
            onChange={(e) => setMaxAge(e.target.value)}
            onBlur={handleInputChange}
          />
        </div>
      </div>
    </>
  );
}

核心逻辑说明 #

• 父组件负责数据存储和过滤逻辑，子组件与中间组件仅需做回调函数的传递，无需处理状态逻辑。
• 孙组件的状态变化会触发回调函数，将过滤参数传递回父组件，父组件执行过滤后更新状态，再将更新后的数据传递给DataGrid完成渲染。

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