reactjs 如何仅使用__REACT_DEVTOOLS_GLOBAL_HOOK__遍历React组件树

ckx4rj1h 于 2023-01-12 发布在 React

关注(0)|答案(1)|浏览(297)

- bounty将在5天后过期**。回答此问题可获得+500声望奖励。Sam Hasler希望引起更多人关注此问题。

我正在尝试遍历React组件树（或者以某种方式访问所有组件），并在浏览器中创建自己的自定义UI（很可能是一个扩展）来操作不同的组件。
这是我的代码：

// const root_node = root._internalRoot.current; 
const root_node = document.getElementById('root')
const renderer = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1);
const rendered_root_node = renderer.findFiberByHostInstance(root_node);

但它返回null。我也尝试使用findHostInstanceByFiber。
是否有任何方法可以遍历浏览器中的零部件？

reactjs

来源：https://stackoverflow.com/questions/73123202/how-can-i-traverse-react-component-tree-just-using-react-devtools-global-hook

1条答案

按热度按时间

fnvucqvd1#

下面是一个如何遍历组件树并访问组件示例的示例：

// make sure the React Developer Tools extension is installed
const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;

// traverse the component tree
hook.getFiberRoots((roots) => {
  roots.forEach((root) => {
    traverse(root.current);
  });
});

function traverse(fiber) {
  console.log(fiber.stateNode); // logs the component instance
  fiber.child && traverse(fiber.child);
  fiber.sibling && traverse(fiber.sibling);
}

上例对REACT_DEVTOOLS_GLOBAL_HOOK对象使用getFiberRoots方法来获取组件树的根数组。然后循环遍历根并调用遍历函数，该函数将遍历组件树并记录组件示例。
值得注意的是，此功能将来可能会更改，并且可能无法在所有环境中工作，也不建议在生产环境中使用。

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs 如何仅使用__REACT_DEVTOOLS_GLOBAL_HOOK__遍历React组件树

1条答案

相关问题

热门标签

最新问答