React中如何一次性将子组件静态信息传递给祖先组件？

因为你的Child组件thing属性在生命周期内固定不变，完全不需要用useContext或者逐层传递回调，最直接的方法是在Ancestor组件里递归遍历所有嵌套的子节点，直接提取目标属性，具体实现如下：

实现思路 #

1. 编写递归函数，借助React.Children遍历所有子元素，判断是否为Child组件；
2. 若是Child组件则提取其thing属性值，若当前元素还有子节点则继续递归遍历；
3. 在Ancestor挂载阶段执行一次收集逻辑，把结果存入状态或变量即可。

代码示例 #

import { useEffect, useState } from 'react';

// 你的Child组件示例
const Child = ({ thing }) => {
  return <div>Child: {thing}</div>;
};
// 可选：给Child设置displayName，方便后续判断组件类型
Child.displayName = 'Child';

const Ancestor = ({ children }) => {
  const [collectedThings, setCollectedThings] = useState([]);

  // 递归收集所有Child的thing属性
  const collectThingProps = (elements) => {
    const result = [];
    React.Children.forEach(elements, (element) => {
      // 判断当前元素是否为Child组件（两种判断方式选其一即可）
      // 方式1：直接对比组件引用
      // if (element.type === Child)
      // 方式2：通过displayName判断，更适合组件别名/动态导入场景
      if (element.type.displayName === 'Child') {
        result.push(element.props.thing);
      }
      // 递归处理当前元素的子节点
      if (element.props.children) {
        result.push(...collectThingProps(element.props.children));
      }
    });
    return result;
  };

  useEffect(() => {
    // 组件挂载时仅执行一次收集逻辑
    const things = collectThingProps(children);
    setCollectedThings(things);
  }, []); // 若children是静态结构，依赖项可设为空数组

  return (
    <div>
      <h3>收集到的thing值：{collectedThings.join(', ')}</h3>
      {children}
    </div>
  );
};

// 使用示例
const App = () => {
  return (
    <Ancestor>
      <div>
        <div>
          <Child thing="foo" />
          <Child thing="bar" />
        </div>
        <Child thing="foo" />
      </div>
    </Ancestor>
  );
};

注意事项 #

• 若你的Child组件存在别名导出、动态导入等情况，推荐用displayName来判断组件类型，避免因引用不一致导致判断失败；
• 因为thing属性固定不变，所以只需要在组件挂载时收集一次，无需处理动态更新的逻辑，性能开销极低。

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