开发工具和调试

React Flow 经常看起来像一个神奇的黑盒子，但实际上，如果您知道在哪里查看，您可以揭示很多关于其内部状态的信息。在本指南中，我们将向您展示三种不同的方法来揭示流程的内部状态

• 一个显示视窗当前位置和缩放级别的 <ViewportLogger /> 组件。
• 一个显示每个节点状态的 <NodeInspector /> 组件。
• 一个包装流程 onNodesChange 处理程序的 <ChangeLogger />，并在每次调度更改时记录它。

虽然我们发现这些工具有助于确保 React Flow 正常运行，但您也可能会发现它们在调试应用程序时很有用，因为您的流程及其交互变得越来越复杂。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

我们鼓励您将本示例中的任何或所有组件复制到您自己的项目中，并根据需要修改它们：每个组件都可以独立工作！

节点检查器

<NodeInspector /> 组件利用了我们的 useNodes 钩子来访问流程中的所有节点。通常情况下，我们不建议使用此钩子，因为它会在任何节点发生更改时触发重新渲染，但这正是它在调试中如此有用！

在 React Flow 测量节点的尺寸后，会将 width 和 height 属性添加到每个节点。我们将这些尺寸以及其他信息（如节点的 ID 和类型）传递给自定义的 <NodeInfo /> 组件。

我们利用了 <EdgeLabelRenderer /> 组件，使我们能够将检查器渲染到 React Flow 的视窗中。这意味着它的内容将与流程中的其他内容一起定位和转换，因为用户平移和缩放。

更改日志

来自 React Flow 本身的节点和边的任何更改都将通过 onNodesChange 和 onEdgesChange 回调传达给您。如果您正在使用受控流程（这意味着您自己管理节点和边），则需要将这些更改应用于您的状态，以便保持同步。

<ChangeLogger /> 组件使用一个自定义函数包装了用户提供的 onNodesChange 处理程序，该函数会拦截和记录每次调度的更改。我们可以使用 useStore 和 useStoreApi 钩子来访问存储，然后相应地更新 React Flow 的内部状态。这两个钩子使您可以有效地访问 React Flow 的内部状态和方法。

除了调试之外，使用 <ChangeLogger /> 是了解 React Flow 工作原理的绝佳方式，并让您思考可以在每次更改的基础上构建的不同功能。

您可以在 API 参考中找到有关 NodeChange 和 EdgeChange 类型的文档。

视窗日志

<ViewportLogger /> 是从 React Flow 的存储中提取状态的最简单示例，只要您知道在哪里寻找即可。视窗的状态存储在内部的 transform 键下（我们从 d3-zoom 继承的名字）。此组件提取 x、y 和 zoom 转换组件，并将它们渲染到一个 <Panel /> 组件中。

告诉我们您的想法

如上所述，如果您对如何改进开发工具有任何反馈或想法，请在 Discord 或通过邮件 [email protected] 告诉我们。如果您使用这些想法构建了自己的开发工具，我们也希望听到您的消息！