如何使用图表软件可视化我的React组件树？

Question

我是一个视觉学习者，这对我在设计，实施，测试等方面的帮助很大。 我需要一个有点图表，它可以为树中的每个组件显示道具，状态，事件，输入，处理，输出等，并且也作为一个整体。我想使用omnigraffle等软件将这些组件之间的关系可视化为和。

Answer 1

我认为您应该尝试使用React Developer Tools。它是React的Chrome DevTools扩展。它允许您检查Chrome开发人员工具中的React组件层次结构。您还可以检查他们的州和其他财产。

Answer 2

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

React Sight（chrome扩展程序）

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

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

反应单片眼镜（npm包）

React Monocle解析您的React源文件以生成表示您的React组件层次结构的可视树图。然后显示该树以及应用程序的实时副本。

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