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

Question

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

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

React 开发工具中的 React 树结构

Answer 1

你可以看看React Test Renderer .

provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

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

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