applyEdgeChanges()

在 <ReactFlow /> 组件上的各种事件可以产生一个 EdgeChange，它描述了如何以某种方式更新你的流程的边。如果你不需要任何自定义行为，这个工具可以用于获取这些更改的数组并将其应用到你的边上。

🌐 Various events on the <ReactFlow /> component can produce an EdgeChange that describes how to update the edges of your flow in some way. If you don’t need any custom behavior, this util can be used to take an array of these changes and apply them to your edges.


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

签名

🌐 Signature

Parameters:

Name	Type	Default
`changes`	`EdgeChange<EdgeType>[]` Array of changes to apply.
`edges`	`EdgeType[]` Array of edge to apply the changes to.

Returns:

EdgeType[]

Array of updated edges.

注释

🌐 Notes

如果你不需要任何自定义行为，useEdgesState 钩子会方便地为你封装这个工具和 React 的 useState 钩子，使用起来可能更简单。