Edge

其中 Connection 是两个节点之间边缘的最小描述，而 Edge 是完整的描述，其中包含 React Flow 渲染它所需的一切。

¥Where a Connection is the minimal description of an edge between two nodes, an Edge is the complete description with everything React Flow needs to know in order to render it.


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

变体

¥Variants

Edge

GitHub 上的源代码

¥Source on GitHub

Name	Type	Default
`id`	`string` Unique id of an edge.
`type`	`EdgeType` Type of edge defined in `edgeTypes`.
`source`	`string` Id of source node.
`target`	`string` Id of target node.
`sourceHandle`	`string \| null` Id of source handle, only needed if there are multiple handles per node.
`targetHandle`	`string \| null` Id of target handle, only needed if there are multiple handles per node.
`animated`	`boolean`
`hidden`	`boolean`
`deletable`	`boolean`
`selectable`	`boolean`
`data`	`EdgeData` Arbitrary data passed to an edge.
`selected`	`boolean`
`markerStart`	`EdgeMarkerType` Set the marker on the beginning of an edge.
`markerEnd`	`EdgeMarkerType` Set the marker on the end of an edge.
`zIndex`	`number`
`ariaLabel`	`string`
`interactionWidth`	`number` ReactFlow renders an invisible path around each edge to make them easier to click or tap on. This property sets the width of that invisible path.
`label`	`ReactNode` The label or custom element to render along the edge. This is commonly a text label or some custom controls.
`labelStyle`	`CSSProperties` Custom styles to apply to the label.
`labelShowBg`	`boolean`
`labelBgStyle`	`CSSProperties`
`labelBgPadding`	`[number, number]`
`labelBgBorderRadius`	`number`
`style`	`CSSProperties`
`className`	`string`
`reconnectable`	`boolean \| HandleType` Determines whether the edge can be updated by dragging the source or target to a new node. This property will override the default set by the `edgesReconnectable` prop on the `<ReactFlow />` component.
`focusable`	`boolean`
`ariaRole`	`AriaRole` The ARIA role attribute for the edge, used for accessibility.	`"group"`
`domAttributes`	`Omit<SVGAttributes<SVGGElement>, "id" \| "style" \| "className" \| "role" \| "aria-label">` General escape hatch for adding custom attributes to the edge’s DOM element.

SmoothStepEdge

GitHub 上的源代码

¥Source on GitHub

SmoothStepEdge 变体具有与 Edge 相同的所有字段，但它还具有以下附加字段：

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

Name	Type	Default
`type`	`"smoothstep"`
`pathOptions`	`{ offset?: number; borderRadius?: number; }`

BezierEdge

GitHub 上的源代码

¥Source on GitHub

BezierEdge 变体具有与 Edge 相同的所有字段，但它还具有以下附加字段：

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

Name	Type	Default
`type`	`"default"`
`pathOptions`	`{ curvature?: number; }`

默认边缘类型

¥Default edge types

你可以通过将 type 属性设置为以下值之一来创建 React Flow 的任何默认边：

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

"default"
"straight"
"step"
"smoothstep"
"simplebezier"

如果你根本没有设置 type 属性，React Flow 将回退到 "default" 贝塞尔曲线边缘类型。

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

即使你将 edgeTypes 属性设置为其他内容，这些默认边也可用，除非你直接覆盖这些键中的任何一个。

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