不受控流程

使用 React Flow 有两种方式 - 受控或不受控。受控意味着您控制节点和边的状态。在不受控流程中，节点和边的状态由 React Flow 在内部处理。在本部分，我们将向您展示如何使用不受控流程。

不受控流程的实现更简单，因为您不需要传递任何处理程序

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

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

如您所见，我们传递 defaultEdgeOptions 来定义边是动画的。这很有帮助，因为您无法再使用 onConnect 处理程序将自定义选项传递给新创建的边。尝试将“节点 B”连接到“节点 C”，您会看到新边是动画的。

更新节点和边

由于您在本地状态中没有节点和边，因此无法直接更新它们。为此，您需要使用 React Flow 实例，它包含用于更新内部状态的函数。您可以通过 onInit 回调获得实例，或者更好地使用 useReactFlow 钩子。让我们创建一个按钮，在随机位置添加一个新节点。为此，我们将流程用 ReactFlowProvider 包裹，并使用 addNodes 函数。

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

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