开发工具和调试

¥Devtools and Debugging

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

¥React Flow can often seem like a magic black box, but in reality you can reveal quite a lot about its internal state if you know where to look. In this guide we will show you three different ways to reveal the internal state of your flow:

• <ViewportLogger /> 组件显示视口的当前位置和缩放级别。

  ¥A <ViewportLogger /> component that shows the current position and zoom level of the viewport.

• 显示每个节点状态的 <NodeInspector /> 组件。

  ¥A <NodeInspector /> component that reveals the state of each node.

• <ChangeLogger /> 封装流的 onNodesChange 处理程序并在分派时记录每个更改。

  ¥A <ChangeLogger /> that wraps your flow’s onNodesChange handler and logs each change as it is dispatched.

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

¥While we find these tools useful for making sure React Flow is working properly, you might also find them useful for debugging your applications as your flows and their interactions become more complex.

import { useCallback } from 'react';
import {
  ReactFlow,
  addEdge,
  useEdgesState,
  useNodesState,
  type Edge,
  type OnConnect,
  type Node,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import DevTools from './Devtools';
 
const initNodes: Node[] = [
  {
    id: '1a',
    type: 'input',
    data: { label: 'Node 1' },
    position: { x: 250, y: 5 },
  },
  {
    id: '2a',
    data: { label: 'Node 2' },
    position: { x: 100, y: 120 },
  },
  {
    id: '3a',
    data: { label: 'Node 3' },
    position: { x: 400, y: 120 },
  },
];
 
const initEdges: Edge[] = [
  { id: 'e1-2', source: '1a', target: '2a' },
  { id: 'e1-3', source: '1a', target: '3a' },
];
 
const fitViewOptions = { padding: 0.5 };
 
function Flow() {
  const [nodes, , onNodesChange] = useNodesState(initNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
 
  const onConnect: OnConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
      fitViewOptions={fitViewOptions}
    >
      <DevTools />
    </ReactFlow>
  );
}
 
export default Flow;

我们鼓励你将此示例中的任何或所有组件复制到你自己的项目中并根据你的需要进行修改：每个组件独立工作！

¥We encourage you to copy any or all of the components from this example into your own projects and modify them to suit your needs: each component works independently!

节点检查器

¥Node Inspector

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

¥The <NodeInspector /> component makes use of our useNodes hook to access all the nodes in the flow. Typically we discourage using this hook because it will trigger a re-render any time any of your nodes change, but that’s exactly what makes it so useful for debugging!

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

¥The width and height properties are added to each node by React Flow after it has measured the node’s dimensions. We pass those dimensions, as well as other information like the node’s id and type, to a custom <NodeInfo /> component.

我们使用 <ViewportPortal /> 组件让我们将检查器渲染到 React Flow 的视口中。这意味着它的内容将在用户平移和缩放时与其余流一起定位和转换。

¥We make use of the <ViewportPortal /> component to let us render the inspector into React Flow’s viewport. That means it’s content will be positioned and transformed along with the rest of the flow as the user pans and zooms.

变更日志器

¥Change Logger

源自 React Flow 本身的任何对节点和边缘的更改都会通过 onNodesChange 和 onEdgesChange 回调传达给你。如果你使用的是受控流（这意味着你自己管理节点和边缘），则需要将这些更改应用于你的状态以使所有内容保持同步。

¥Any change to your nodes and edges that originates from React Flow itself is communicated to you through the onNodesChange and onEdgesChange callbacks. If you are working with a controlled flow (that means you’re managing the nodes and edges yourself), you need to apply those changes to your state in order to keep everything in sync.

<ChangeLogger /> 组件使用自定义函数封装用户提供的 onNodesChange 处理程序，该函数在分派时拦截并记录每个更改。我们可以通过使用 useStore 和 useStoreApi 钩子来访问存储，然后相应地更新 React Flow 的内部状态来实现这一点。这两个钩子为你提供了对 React Flow 内部状态和方法的强大访问。

¥The <ChangeLogger /> component wraps your user-provided onNodesChange handler with a custom function that intercepts and logs each change as it is dispatched. We can do this by using the useStore and useStoreApi hooks to access the store and and then update React Flow’s internal state accordingly. These two hooks give you powerful access to React Flow’s internal state and methods.

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

¥Beyond debugging, using the <ChangeLogger /> can be a great way to learn more about how React Flow works and get you thinking about the different functionality you can build on top of each change.

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

¥You can find documentation on the NodeChange and EdgeChange types in the API reference.

视口日志器

¥Viewport Logger

如果你知道要查找什么，<ViewportLogger /> 就是你可以从 React Flow 的存储中提取什么状态的最简单的示例。视口的状态内部存储在 transform 键下（我们从 d3-zoom  继承的名称）。此组件提取转换的 x、y 和 zoom 组件并将它们渲染为 <Panel /> 组件。

¥The <ViewportLogger /> is the simplest example of what state you can pull out of React Flow’s store if you know what to look for. The state of the viewport is stored internally under the transform key (a name we inherited from d3-zoom ). This component extracts the x, y, and zoom components of the transform and renders them into a <Panel /> component.

让我们知道你的想法

¥Let us know what you think

如上所述，如果你对如何改进 devtools 有任何反馈或想法，请在 Discord  或通过 info@xyflow.com 邮件告知我们。如果你使用这些想法构建自己的 devtools，我们很乐意听到它！

¥As mentioned above, if you have any feedback or ideas on how to improve the devtools, please let us know on Discord  or via mail at info@xyflow.com. If you build your own devtools using these ideas, we’d love to hear about it!