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屬性不同，此工具也不會新增新的邊。