非制御フロー

React Flow には、制御フローと非制御フローの 2 つの使用方法があります。制御フローとは、ノードとエッジの状態を制御することを意味します。非制御フローでは、ノードとエッジの状態は 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>
}