useEdgesState

GitHub のソース

このフックを使用すると、`ReactFlowInstance` の外部でノードとエッジの状態を管理する、制御されたフローのプロトタイプを簡単に作成できます。 React の `useState` フックにヘルパーコールバックを追加したものと考えることができます。

import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
 
const initialNodes = [];
const initialEdges = [];
 
export default function () {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
    />
  );
}

シグネチャ

名前	型
#パラメータ
#`initialEdges`	`Edge<T>[]`
#戻り値
#`[0]`	`Edge<T>[]` 現在のエッジの配列です。これを <ReactFlow /> コンポーネントの edges プロパティに直接渡すことも、レイアウトを実行するために最初に操作することもできます。
#`[1]`	`React.Dispatch<React.SetStateAction<Edge<T>[]>>` エッジを更新するために使用できる関数です。新しいエッジの配列、または現在のエッジの配列を受け取って新しいエッジの配列を返すコールバックを渡すことができます。これは、React の useState フックによって返されるタプルの 2 番目の要素と同じです。
#`[2]`	`(changes: EdgeChange[]) => void` EdgeChanges の配列を受け取り、それに応じてエッジの状態を更新できる便利なコールバックです。通常、これを <ReactFlow /> コンポーネントの onEdgesChange プロパティに直接渡します。

TypeScript

このフックは、カスタムエッジ型のジェネリック型引数を受け入れます。詳細については、TypeScript ガイドのこのセクションを参照してください。

const nodes = useEdgesState<CustomEdgeType>();

注意事項

このフックは、プロトタイピングを容易にし、ドキュメントの例をより明確にするために作成されました。本番環境でこのフックを使用しても問題ありませんが、実際には、Zustandのような、より洗練された状態管理ソリューションを使用することをお勧めします。

フックユーティリティ