addEdge()

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

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

签名

名称	类型
#参数
#`edge`	`Edge \| Connection`
#`edges`	`Edge[]`
#返回值
#	`Edge[]`

备注

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

工具