添加交互性

添加导入

为了管理更改，我们将使用 useState 和来自 React Flow 的两个辅助函数：applyNodeChanges 和 applyEdgeChanges。所以让我们导入这些函数：

🌐 To manage changes, we’ll be using useState with two helper functions from React Flow: applyNodeChanges and applyEdgeChanges. So let’s import these functions:

import { useState, useCallback } from 'react';
import { ReactFlow, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';

定义节点和边缘

🌐 Define nodes and edges

我们需要定义初始节点和边。这些将作为我们流程的起点。

🌐 We need to define initial nodes and edges. These will be the starting point for our flow.

const initialNodes = [
  {
    id: 'n1',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1' },
    type: 'input',
  },
  {
    id: 'n2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
];
 
const initialEdges = [
  {
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
  },
];

初始化状态

🌐 Initialize state

在我们的组件中，我们将调用 useState 钩子来管理节点和边的状态：

🌐 In our component, we’ll call the useState hook to manage the state of our nodes and edges:

export default function App() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  return (
    <div style={{ height: '100%', width: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

添加事件处理程序

🌐 Add event handlers

我们需要创建两个事件处理器： onNodesChange 和 onEdgesChange。当发生变化时（例如拖动或删除元素），它们将用于更新我们的节点和边的状态。请继续将这些处理器添加到你的组件中：

🌐 We need to create two event handlers: onNodesChange and onEdgesChange. They will be used to update the state of our nodes and edges when changes occur, such as dragging or deleting an element. Go ahead and add these handlers to your component:

const onNodesChange = useCallback(
  (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
  [],
);
const onEdgesChange = useCallback(
  (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
  [],
);

将它们传递给 ReactFlow

🌐 Pass them to ReactFlow

现在我们可以将我们的节点、边和事件处理程序传递给 <ReactFlow /> 组件：

🌐 Now we can pass our nodes, edges, and event handlers to the <ReactFlow /> component:

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  fitView
>
  <Background />
  <Controls />
</ReactFlow>

交互式流程

🌐 Interactive flow

就这样！你现在有了一个基本的互动流程 🎉

🌐 And that’s it! You now have a basic interactive flow 🎉

当你拖动或选择一个节点时，onNodesChange 处理程序会被触发。然后，applyNodeChanges 函数使用这些更改事件来更新节点的当前状态。以下是整个过程的详细说明。试着点击并拖动一个节点来移动它，并实时观察界面的更新。

🌐 When you drag or select a node, the onNodesChange handler is triggered. The applyNodeChanges function then uses these change events to update the current state of your nodes. Here’s how it all comes together. Try clicking and dragging a node to move it around and watch the UI update in real time.

创建 onConnect 处理程序

🌐 Create onConnect handler

onConnect 处理程序在两个节点之间建立新连接时被调用。我们可以使用 addEdge 工具函数创建一个新的边并更新边数组。

🌐 The onConnect handler is called whenever a new connection is made between two nodes. We can use the addEdge utility function to create a new edge and update the edge Array.

const onConnect = useCallback(
  (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
  [],
);

传递给 ReactFlow

🌐 Pass it to ReactFlow

现在我们可以将 onConnect 处理程序传递给 <ReactFlow /> 组件：

🌐 Now we can pass the onConnect handler to the <ReactFlow /> component:

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  fitView
>
  <Background />
  <Controls />
</ReactFlow>

可连接流程

🌐 Connectable flow

尝试通过从一个节点的控制点拖动到另一个节点来连接这两个节点。onConnect 控制点将被触发，并且新的边将被添加到流程中。🥳

🌐 Try to connect the two nodes by dragging from on handle to another one. The onConnect handler will be triggered, and the new edge will be added to the flow. 🥳