我是一个视觉学习者，这将帮助我在设计，实现，测试等很多。我需要一种图，可视化 prop ，状态，事件，输入，处理，输出等树中的每个组件，也作为一个整体。我想可视化组件本身和这些组件之间的关系，使用像omnigraffle或其他软件。
2w3kk1z51#
这可以通过浏览器扩展或全局npm包来实现。（很少有本地npm包）让我向您展示两个最流行的工具。
React Sight是React应用程序组件层次树的实时视图，支持React Router和Redux。来源：https://github.com/React-Sight/React-Sight
React Monocle解析React源文件，生成一个表示React组件层次结构的可视化树形图，然后将该树与应用程序的实时副本一起显示。来源：https://github.com/team-gryff/react-monocle
6ovsh4lw2#
我认为你应该试试React开发者工具。它是一个Chrome开发者工具的React扩展。它允许你在Chrome开发者工具中检查React组件的层次结构。你还可以检查它们的状态和其他属性。
kqqjbcuj3#
如果有人正在寻找这个，我找到了这个VSCode扩展。它很不错。只要确保使用Command center来运行generate tree命令。它不是完美的，但它是我能找到的最好的。https://marketplace.visualstudio.com/items?itemName=HabeebArul.react-component-tree
Command center
generate tree
3条答案
按热度按时间2w3kk1z51#
这可以通过浏览器扩展或全局npm包来实现。（很少有本地npm包）让我向您展示两个最流行的工具。
React Sight是React应用程序组件层次树的实时视图，支持React Router和Redux。
来源：https://github.com/React-Sight/React-Sight
React Monocle解析React源文件，生成一个表示React组件层次结构的可视化树形图，然后将该树与应用程序的实时副本一起显示。
来源：https://github.com/team-gryff/react-monocle
6ovsh4lw2#
我认为你应该试试React开发者工具。它是一个Chrome开发者工具的React扩展。它允许你在Chrome开发者工具中检查React组件的层次结构。你还可以检查它们的状态和其他属性。
kqqjbcuj3#
如果有人正在寻找这个，我找到了这个VSCode扩展。它很不错。只要确保使用
Command center来运行generate tree命令。它不是完美的，但它是我能找到的最好的。https://marketplace.visualstudio.com/items?itemName=HabeebArul.react-component-tree