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

Question

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

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

React 开发工具中的 React 树结构

标签： javascripthtmlreactjsdom

Answer 1

你可以看看React Test Renderer。

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

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

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