如何获得一个反应组件树，就像它在反应开发工具中显示的那样？

Posted 2023-03-05

【中文标题】如何获得一个反应组件树，就像它在反应开发工具中显示的那样？

【英文标题】：How to get a react component tree just like it is shown in react dev tools?

【发布时间】：2019-01-27 07:22:44

【问题描述】：

我想获取我渲染的 React 组件的树，因为我有一个场景，我必须将 React 组件转换为一个对象才能按原样存储它。

请参阅下面的 React 树结构示例。

React 开发工具中的 React 树结构

【问题讨论】：

嗨，你找到方法了吗？

【参考方案1】：

你可以看看React Test Renderer。

提供了一个 React 渲染器，可用于将 React 组件渲染为纯 javascript 对象，而不依赖于 DOM 或原生移动环境。

然后为你的树创建一个 JSON 重新表示

const instance = TestRenderer.create(<MyComponent />);
instance.toJSON();

【讨论】：

这也给出了 html dom，而不是 React DOM。