不受控制的流程

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

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

参考预览：https://codesandbox.io/p/sandbox/romantic-wiles-2yr3q3?file=%2FApp.js&utm_medium=sandpack

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

更新节点和边

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

提示

本示例中的 Flow 组件使用 ReactFlowProvider 进行包装，以使用 useReactFlow 钩子。

参考预览：https://codesandbox.io/p/sandbox/jovial-rgb-z59cyg?utm_medium=sandpack