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，并且可能更易于使用。

工具