Edge

哪里 Connection 是两个节点之间边的最小描述，Edge 是完整的描述，包含 React Flow 需要渲染它的一切内容。

export type Edge<T> = DefaultEdge<T> | SmoothStepEdge<T> | BezierEdge<T>;

变体

名称	类型
#`id`	`string`
#`type`	`string`
#`style?`	`React.CSSProperties`
#`className?`	`string`
#`source`	`string`
#`target`	`string`
#`sourceHandle`	`string \| null`
#`targetHandle`	`string \| null`
#`data`	`T`
#`hidden`	`boolean`
#`animated`	`boolean`
#`selected`	`boolean`
#`selectable`	`boolean`
#`deletable`	`boolean`
#`focusable`	`boolean`
#`reconnectable?`	`boolean \| "source" \| "target"` 决定边是否可以通过拖动源或目标到新节点来更新。此属性将覆盖 <ReactFlow /> 组件上的 edgesReconnectable 属性设置的默认值。
#`markerStart`	`string \| EdgeMarker`
#`markerEnd`	`string \| EdgeMarker`
#`zIndex?`	`number`
#`interactionWidth`	`number` ReactFlow 在每个边的周围渲染一条不可见的路径，以便更容易点击或点击它们。此属性设置该不可见路径的宽度。
#`ariaLabel`	`string`
#`label?`	`string \| React.ReactNode`
#`labelStyle?`	`React.CSSProperties`
#`labelShowBg?`	`boolean`
#`labelBgStyle?`	`React.CSSProperties`
#`labelBgPadding?`	`[number, number]`
#`labelBgBorderRadius?`	`number`

The SmoothStepEdge variant has all the same fields as an Edge, but it also has the following additional fields

The BezierEdge variant has all the same fields as an Edge, but it also has the following additional fields

You can create any of React Flow’s default edges by setting the type property to one of the following values

If you don’t set the type property at all, React Flow will fallback to the "default" bezier curve edge type.

These default edges are available even if you set the edgeTypes prop to something else, unless you override any of these keys directly.