applyNodeChanges()

GitHub上のソースコード

<ReactFlow />コンポーネントの様々なイベントは、フローのノードをどのように更新するかを記述するNodeChangeを生成する可能性があります。カスタムの動作が不要な場合は、このユーティリティを使用して、これらの変更の配列を取得し、ノードに適用できます。

import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges } from '@xyflow/react';
 
export default function Flow() {
  const [nodes, setNodes] = useState([]);
  const [edges, setEdges] = useState([]);
  const onNodesChange = useCallback(
    (changes) => {
      setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
    },
    [setNodes],
  );
 
  return (
    <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
  );
}

シグネチャ

名前	型
#パラメータ
#`changes`	`NodeChange[]`
#`nodes`	`Node[]`
#戻り値
#	`Node[]`

備考

カスタムの動作が不要な場合は、useNodesStateフックは、このユーティリティとReactのuseStateフックを便利にラップしており、より簡単に使用できる可能性があります。

ユーティリティ