如何像react dev工具中所示的那样获取react组件树？

Question

我想获得渲染的React组件的树，因为有一种情况，我必须将React组件转换为对象以按原样存储它。

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

React Dev Tools中的反应树结构

Answer 1

您可以查看React Test Renderer。

  

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

，然后为您的树创建JSON重新呈现

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