给定HTML Node如何查找匹配的React Node并获取对应JSX元素与props

实现方案 #

React会在渲染生成的DOM节点上挂载私有的Fiber节点属性，我们可以通过读取该属性获取对应的React节点信息、props和所属组件信息，效果和React DevTools的节点查询一致。

完整补充代码 #

const div = document.getElementById("demo"); // 注意原代码缺失document前缀

// 从DOM节点获取对应React Fiber节点
function getReactFiberFromDomNode(domNode) {
  for (const key in domNode) {
    // 兼容React 16+ 不同版本的内部属性命名
    if (key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$')) {
      return domNode[key];
    }
  }
  return null;
}

const targetFiber = getReactFiberFromDomNode(div);
if (targetFiber) {
  // 获取当前节点的属性，和DevTools展示的props一致
  const nodeProps = targetFiber.memoizedProps;
  // 获取当前节点的类型，示例中为字符串'div'
  const elementType = targetFiber.type;

  // 向上遍历Fiber链查找所属的自定义组件（示例中的Home组件）
  let componentFiber = targetFiber.return;
  while (componentFiber && typeof componentFiber.type !== 'function') {
    componentFiber = componentFiber.return;
  }
  // 所属组件的构造函数/函数定义、组件属性
  const component = componentFiber?.type;
  const componentProps = componentFiber?.memoizedProps;

  // 输出结果
  console.log('元素类型：', elementType);
  console.log('元素props：', nodeProps);
  console.log('所属组件：', component);
  console.log('组件props：', componentProps);
}

注意事项 #

• 上述用到的__reactInternalInstance$、__reactFiber$均为React私有内部属性，仅适用于调试工具类场景，禁止在生产业务代码中使用
• 生产环境打包后React会压缩混淆内部属性名和组件名，需要配合sourcemap才能还原原始信息

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