非受控流程

使用 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>
}