核心概念

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

受控或非受控

使用 React Flow，您可以通过两种方式设置流程。您可以创建一个受控流程或 非受控流程。我们建议使用受控流程，但对于更简单的用例，您也可以设置非受控流程。**在接下来的部分中，我们将设置一个受控流程。**让我们从向 ReactFlow 组件添加一些节点和边开始。

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

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

基本功能

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

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

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

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

• 可选节点和边
• 可拖动节点
• 可移除节点和边 - （按退格键移除选定的节点或边，可以使用 deleteKeyCode 属性进行调整）
• 按 Shift 键进行多选区域（默认 selectionKeyCode）
• 按 Command 键进行多选（默认 multiSelectionKeyCode）

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

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

连接节点

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

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

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

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

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

或使用 defaultEdgeOptions 属性：

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