React遍历组件树为何仅打印首个key？如何获取全树所有节点key

问题复现 #

使用如下遍历逻辑时，控制台仅打印第一个key Component，无法拿到深层嵌套节点的key：

import React from "react";

function printDom(node: React.ReactNode) {
  if (!React.isValidElement(node)) {
    console.log("Not a valid elemenent", node);
    return;
  }

  console.log(node.key);

  React.Children.forEach(node.props.children, (child) => printDom(child));
}

function Container(props: { children: React.ReactNode }) {
  printDom(props.children);
  return <>{props.children}</>;
}

function SuperNestedCompnent() {
  return <div key="div">Hi</div>;
}

function NestedCompnent() {
  return <SuperNestedCompnent key="SuperNestedCompnent" />;
}

function Component() {
  return <NestedCompnent key="NestedComponent" />;
}

export default function App() {
  return (
    <Container>
      <Component key="Component" />
    </Container>
  );
}

预期输出是按层级依次打印：

• Component
• NestedComponent
• SuperNestedCompnent
• div

根因分析 #

现有遍历逻辑的认知误区导致递归提前终止：

• React.Children 工具方法只会遍历当前元素props.children上挂载的直接子节点，也就是写JSX时显式嵌套在当前标签内部的元素，不会自动深入组件内部获取渲染结果
• 函数组件、类组件类型的React元素，本质只是一个带type（组件函数/类引用）和props的描述对象，它内部返回的渲染内容只有组件被实际执行/渲染时才会生成，不会提前挂载到元素的props属性上
• 上述代码递归到<Component key="Component" />节点时，它的props.children是空值，自然无法继续往下找到内部嵌套的NestedCompnent、SuperNestedCompnent、div节点

修正方案 #

要遍历完整的组件树，需要针对不同节点类型做处理：如果是组件类型节点，先执行组件拿到它返回的渲染内容，再递归遍历；如果是原生DOM、Fragment等内置节点，再直接遍历它的props.children即可。
修正后的遍历代码如下：

function printDom(node: React.ReactNode) {
  if (!React.isValidElement(node)) {
    console.log("Not a valid element", node);
    return;
  }

  // 打印当前节点key
  console.log(node.key);

  const nodeType = node.type;
  let renderResult: React.ReactNode = null;

  // 处理函数组件：执行组件函数拿到返回的渲染结构
  if (typeof nodeType === "function") {
    // 类组件需要额外判断：通过new创建实例后调用render方法拿结果，此处示例仅覆盖函数组件场景
    const Comp = nodeType as React.FC<any>;
    renderResult = Comp(node.props);
  } else {
    // 处理原生标签、Fragment等内置节点，直接取props.children
    renderResult = node.props.children;
  }

  // 递归遍历拿到的子内容
  React.Children.forEach(renderResult, (child) => printDom(child));
}

注意事项 #

• 上述示例是简化实现，没有覆盖类组件、Context.Provider、Suspense、Memo组件、ForwardRef组件等特殊节点类型，全场景兼容需要补充对应的类型判断分支
• 直接执行组件函数拿渲染结果的方式，不会触发React正常渲染流程的生命周期、hooks挂载逻辑，仅适合做静态JSX结构分析，不要在生产业务逻辑中用这种方式模拟React渲染
• 如果需要在运行时分析真实渲染完成的组件树，更推荐用React DevTools配套的内部API，或者基于react-reconciler实现自定义渲染器做遍历，稳定性更高

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