addEdge()

此工具是一个便捷函数，用于向边数组中添加新的 Edge。它还执行一些验证，以确保你不会添加无效的边或重复已有的边。

🌐 This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don’t add an invalid edge or duplicate an existing one.


import { useCallback } from 'react';
import {
  ReactFlow,
  addEdge,
  useNodesState,
  useEdgesState,
} from '@xyflow/react';
 
export default function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const onConnect = useCallback(
    (connection) => {
      setEdges((oldEdges) => addEdge(connection, oldEdges));
    },
    [setEdges],
  );
 
  return <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect} />;
}

签名

🌐 Signature

Parameters:

Name	Type	Default
`edgeParams`	`EdgeType \| Connection` Either an `Edge` or a `Connection` you want to add.
`edges`	`EdgeType[]` The array of all current edges.
`options.getEdgeId`	`GetEdgeId` Custom function to generate edge IDs. If not provided, the default `getEdgeId` function is used.

Returns:

EdgeType[]

A new array of edges with the new edge added.

注释

🌐 Notes

如果已经存在具有相同 target 和 source 的边（以及如果设置了 targetHandle 和 sourceHandle 也相同），那么即使 id 属性不同，此工具也不会添加新的边。