核心概念

¥Core Concepts

在下一部分中，我们将向你介绍 React Flow 的核心概念，并解释如何创建交互式流程。流程由节点和边（或仅由节点）组成。你可以将 nodes 和 edges 的数组作为属性传递给 ReactFlow 组件。因此，所有节点和边缘 ID 都需要是唯一的。节点需要位置和标签（如果使用 自定义节点，则可能会有所不同），边需要源（节点 ID）和目标（节点 ID）。你可以在 节点选项 和 Edge 选项 部分中阅读有关选项的更多信息。

¥In the following part we will introduce you to the core concepts of React Flow and explain how to create an interactive flow. A flow consists of nodes and edges (or just nodes). You can pass arrays of nodes and edges as props to the ReactFlow component. Hereby all node and edge ids need to be unique. A node needs a position and a label (this could be different if you are using custom nodes) and an edge needs a source (node id) and a target (node id). You can read more about the options in the Node options and Edge options sections.

受控或不受控

¥Controlled or Uncontrolled

使用 React Flow，你可以通过两种方式设置流程。你可以创建一个受控的或 不受控制的流程。我们建议使用受控的，但对于更简单的用例，你也可以设置不受控的流程。在下一部分中，我们将设置一个受控流程。让我们首先向 ReactFlow 组件添加一些节点和边：

¥With React Flow you have two ways to setup a flow. You can either create a controlled or an uncontrolled one. We recommend to use a controlled one but for simpler use cases you can also setup an uncontrolled flow. In the following part we will setup a controlled flow. Let’s start by adding some nodes and edges to the ReactFlow component:

import { useState } from 'react';
import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Input Node' },
    position: { x: 250, y: 25 },
  },
 
  {
    id: '2',
    // you can also pass a React component as a label
    data: { label: <div>Default Node</div> },
    position: { x: 100, y: 125 },
  },
  {
    id: '3',
    type: 'output',
    data: { label: 'Output Node' },
    position: { x: 250, y: 250 },
  },
];
 
const initialEdges = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e2-3', source: '2', target: '3', animated: true },
];
 
function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  return <ReactFlow nodes={nodes} edges={edges} fitView />;
}
 
export default Flow;

基本功能

¥Basic Functionality

默认情况下，React Flow 除了在设置受控流时处理视口外，不会执行任何内部状态更新。与 <input /> 组件一样，你需要传递处理程序以将 React Flow 触发的更改应用于你的节点和边缘。为了选择、拖动和删除节点和边，你需要实现 onNodesChange 和 onEdgesChange 处理程序：

¥By default React Flow doesn’t do any internal state updates besides handling the viewport when you setup a controlled flow. As with an <input /> component you need to pass handlers to apply the changes that are triggered by React Flow to your nodes and edges. In order to select, drag and remove nodes and edges you need to implement an onNodesChange and an onEdgesChange handler:

import { useCallback, useState } from 'react';
import { ReactFlow, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { initialNodes } from './nodes';
import { initialEdges } from './edges';
 
function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
    />
  );
}
 
export default Flow;

这里发生了什么？每当 React Flow 触发更改（节点初始化、节点拖动、边缘选择等）时，都会调用 onNodesChange 处理程序。我们导出 applyNodeChanges 处理程序，这样你就不需要自己处理更改。applyNodeChanges 处理程序返回更新的节点数组，即你的新节点数组。你现在有一个具有以下交互类型的交互式流程：

¥What is happening here? Whenever React Flow triggers a change (node init, node drag, edge select, etc.), the onNodesChange handler gets called. We export an applyNodeChanges handler so that you don’t need to handle the changes by yourself. The applyNodeChanges handler returns an updated array of nodes that is your new nodes array. You now have an interactive flow with the following kinds of interactions:

• 可选节点和边缘

  ¥selectable nodes and edges

• 可拖动节点

  ¥draggable nodes

• 可移动节点和边缘 - （按 Backspace 键删除选定的节点或边缘，可以使用 deleteKeyCode 属性进行调整）

  ¥removable nodes and edges - (press Backspace to remove a selected node or edge, can be adjusted with the deleteKeyCode prop)

• 按 Shift 键进行多选区域（这是默认的 selectionKeyCode）

  ¥multi-selection area by pressing Shift (that’s the default selectionKeyCode)

• 按命令进行多选（这是默认的 multiSelectionKeyCode）

  ¥multi-selection by pressing command (that’s the default multiSelectionKeyCode)

为方便起见，我们导出辅助钩子 useNodesState 和 useEdgesState，你可以使用它们来创建节点和边状态：

¥For convenience we export the helper hooks useNodesState and useEdgesState that you can use to create the nodes and edges state:

const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

连接节点

¥Connecting Nodes

获得完整交互性所缺少的最后一块是 onConnect 处理程序。你需要实现它，以便处理新连接。

¥The last piece that is missing to get the full interactivity is the onConnect handler. You need to implement it, in order to handle new connections.

import { useCallback, useState } from 'react';
import {
  ReactFlow,
  addEdge,
  applyEdgeChanges,
  applyNodeChanges,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import { initialNodes } from './nodes';
import { initialEdges } from './edges';
 
function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  const onNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );
  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
    />
  );
}
 
export default Flow;

在此示例中，我们使用 addEdge 处理程序，该处理程序返回包含新创建边的边数组。如果你想在创建边时设置某个边选项，则可以像这样传递选项：

¥In this example we are using the addEdge handler that returns an array of edges with the newly created one. If you want to set a certain edge option whenever an edge gets created you pass your options like this:

const onConnect = useCallback(
  (connection) =>
    setEdges((eds) => addEdge({ ...connection, animated: true }, eds)),
  [setEdges],
);

或者使用 defaultEdgeOptions prop：

¥or use the defaultEdgeOptions prop:

const defaultEdgeOptions = { animated: true };
...
<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  onConnect={onConnect}
  defaultEdgeOptions={defaultEdgeOptions}
/>;