useNodesState

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}
    />
  );
}

シグネチャ

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

Typescript

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

const nodes = useNodesState<CustomNodeType>();

備考

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

フックユーティリティ