addEdge()

GitHub 上的源代码 

¥Source on GitHub 

此实用程序是一个便利函数，用于将新的 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

注释

¥Notes

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

  ¥If an edge with the same target and source already exists (and the same targetHandle and sourceHandle if those are set), then this util won’t add a new edge even if the id property is different.