applyEdgeChanges()

GitHub上のソース

<ReactFlow />コンポーネント上の様々なイベントは、フローのエッジを何らかの方法で更新する方法を記述したEdgeChangeを生成できます。カスタム動作が必要ない場合は、このユーティリティを使用して、これらの変更の配列を取得し、エッジに適用することができます。

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

シグネチャ

名前	型
#パラメータ
#`changes`	`EdgeChange[]`
#`edges`	`Edge[]`
#戻り値
#	`Edge[]`

注記

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

ユーティリティ