如何获得像 React 开发工具中所示的 React 组件树？

Question

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

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

React 树结构如 React Dev Tools 中所示

Answer 1

你可以看看React Test Renderer。

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

然后创建树的 JSON 表示形式

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