如何使用图表软件可视化我的 React Component-Tree？

Question

我是一个视觉学习者，这对我的设计、实现、测试等有很大帮助。我需要一个图表来可视化树中每个组件的道具、状态、事件、输入、处理、输出等，也可以作为所有的。我想使用 omnigraffle 或其他任何软件来可视化组件本身以及这些组件之间的关系。

Answer 1

这可以通过浏览器扩展或全局 npm 包来实现。（很少是本地的）让我向您展示两个最受欢迎的工具。

React Sight (chrome 扩展)

React Sight 是 React 应用程序组件层次结构树的实时视图，支持 React Router 和 Redux。

来源：https : //github.com/React-Sight/React-Sight

React Monocle（npm 包）

React Monocle 解析你的 React 源文件以生成一个可视化的树形图来表示你的 React 组件层次结构。然后，该树将与您的应用程序的实时副本一起显示。

来源：https : //github.com/team-gryff/react-monocle

Answer 2

我认为你应该尝试 React 开发者工具。它是 React 的 Chrome DevTools 扩展。它允许您在 Chrome 开发者工具中检查 React 组件层次结构。您还可以检查它们的状态和其他属性。