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プロパティが異なっていても、このユーティリティは新しいエッジを追加しません。