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

Question

我是一个视觉学习者，这将对我在设计、实现、测试等方面有很大的帮助。我需要一个类似的图来可视化道具、状态、事件、输入、处理、输出等，并将树中的每个组件和作为一个整体进行可视化。我想要可视化这些组件本身--和--这些组件之间的关系，使用类似于全集或其他任何东西的软件。

Answer 1

这可以通过浏览器扩展或全局npm包来实现。(很少是本地的)让我给你们展示两种最流行的工具。

反应瞄准镜(铬扩展)

React是React应用程序的组件层次树的一个实时视图，它支持Reactive路由器和Redux。

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

React (npm包)

representing解析通过您的React源文件生成一个表示您的React组件层次结构的可视化树状图。然后，该树将与应用程序的活动副本一起显示。

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

Answer 2

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