applyEdgeChanges()

GitHub 上的源代码 

¥Source on GitHub 

<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

注释

¥Notes

• 如果你不需要任何自定义行为，useEdgesState 钩子可以方便地为你封装此实用程序和 React 的 useState 钩子，并且可能更易于使用。

  ¥If you don’t need any custom behavior, the useEdgesState hook conveniently wraps this util and React’s useState hook for you and might be simpler to use.