Edge

當 Connection 是兩個節點之間邊緣的最簡描述時，Edge 則是用於渲染邊緣時 React Flow 需要知道的所有完整描述。

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

變體

名稱	類型
#`id`	`字串`
#`type`	`字串`
#`style?`	`React.CSSProperties`
#`className?`	`字串`
#`source`	`字串`
#`target`	`字串`
#`sourceHandle`	`字串 \| 空值`
#`targetHandle`	`字串 \| 空值`
#`data`	`T`
#`hidden`	`布林值`
#`animated`	`布林值`
#`selected`	`布林值`
#`selectable`	`布林值`
#`deletable`	`布林值`
#`focusable`	`布林值`
#`reconnectable?`	`布林值 \| "來源" \| "目標"` 決定是否可以通過將來源或目標拖曳到新的節點來更新邊緣。此屬性將覆蓋 <ReactFlow /> 元件上的 edgesReconnectable 屬性所設定的預設值。
#`markerStart`	`字串 \| EdgeMarker`
#`markerEnd`	`字串 \| EdgeMarker`
#`zIndex?`	`數字`
#`interactionWidth`	`數字` ReactFlow 會在每個邊緣周圍渲染一條不可見的路徑，使其更容易點擊或觸摸。此屬性設定該不可見路徑的寬度。
#`ariaLabel`	`字串`
#`label?`	`字串 \| React.ReactNode`
#`labelStyle?`	`React.CSSProperties`
#`labelShowBg?`	`布林值`
#`labelBgStyle?`	`React.CSSProperties`
#`labelBgPadding?`	`[數字, 數字]`
#`labelBgBorderRadius?`	`數字`

SmoothStepEdge 變體與 Edge 具有所有相同的欄位，但它還具有以下附加欄位

BezierEdge 變體與 Edge 具有所有相同的欄位，但它還具有以下附加欄位

您可以將 type 屬性設定為以下其中一個值，來建立任何 React Flow 的預設邊緣

如果您完全沒有設定 type 屬性，React Flow 將會回退到 "default" 貝茲曲線邊緣類型。

即使您將 edgeTypes 屬性設定為其他值，這些預設邊緣仍然可用，除非您直接覆寫這些鍵中的任何一個。