applyEdgeChanges()

在 <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 hook 會方便地將此工具和 React 的 useState hook 包裝起來，使用起來可能更簡單。

工具