跳到主要内容

开发工具和调试

备注

这是一个关于实现我们自己的 React Flow 开发工具的正在进行的实验。当我们正在开发实际的包时，我们很乐意听到您对 Discord 或通过电子邮件 info@xyflow.com 的反馈和想法。

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

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

虽然我们发现这些工具对于确保 React Flow 正常工作很有用，但随着您的流程及其交互变得更加复杂，您可能还会发现它们对于调试应用程序很有用。

参考预览：https://codesandbox.io/p/sandbox/late-firefly-csxwpn?file=%2FApp.tsx&utm_medium=sandpack

我们鼓励您将此示例中的任何或所有组件复制到您自己的项目中，并修改它们以满足您的需求：每个组件独立工作！

节点检查器​

<NodeInspector /> 组件利用我们的 useNodes 挂钩来访问流中的所有节点。通常我们不鼓励使用这个钩子，因为它会在任何节点发生变化时触发重新渲染，但这正是它对于调试如此有用的原因！

在测量节点的尺寸后，React Flow 将宽度和高度属性添加到每个节点。我们将这些维度以及其他信息（例如节点的 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 的存储中提取什么状态。视口的状态存储在内部的转换键下（我们从 d3-zoom继承的名称）。该组件提取变换的 x、y 和缩放组件并将它们渲染到 <Panel /> 组件中。