Edge

ここで、Connection は2つのノード間のエッジの最小限の説明であり、Edge はReact Flow がレンダリングするために必要なすべての情報を備えた完全な説明です。

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

バリアント

名前	型
#`id`	`文字列`
#`type`	`文字列`
#`style?`	`React.CSSProperties`
#`className?`	`文字列`
#`source`	`文字列`
#`target`	`文字列`
#`sourceHandle`	`文字列 \| null`
#`targetHandle`	`文字列 \| null`
#`data`	`T`
#`hidden`	`ブール値`
#`animated`	`ブール値`
#`selected`	`ブール値`
#`selectable`	`ブール値`
#`deletable`	`ブール値`
#`focusable`	`ブール値`
#`reconnectable?`	`ブール値 \| "ソース" \| "ターゲット"` エッジのソースまたはターゲットをドラッグして新しいノードに更新できるかどうかを決定します。このプロパティは、<ReactFlow />コンポーネントのedgesReconnectableプロップで設定されたデフォルト設定をオーバーライドします。
#`markerStart`	`文字列 \| EdgeMarker`
#`markerEnd`	`文字列 \| EdgeMarker`
#`zIndex?`	`number`
#`interactionWidth`	`number` ReactFlowは、各エッジの周りに非表示のパスを描画して、クリックやタップを容易にします。このプロパティは、その非表示パスの幅を設定します。
#`ariaLabel`	`文字列`
#`label?`	`文字列 \| React.ReactNode`
#`labelStyle?`	`React.CSSProperties`
#`labelShowBg?`	`ブール値`
#`labelBgStyle?`	`React.CSSProperties`
#`labelBgPadding?`	`[number, number]`
#`labelBgBorderRadius?`	`number`

SmoothStepEdgeバリアントは、Edgeと同じフィールドをすべて持っていますが、以下の追加フィールドも持っています。

BezierEdgeバリアントは、Edgeと同じフィールドをすべて持っていますが、以下の追加フィールドも持っています。

React Flowのデフォルトのエッジは、typeプロパティを以下のいずれかの値に設定することで作成できます。

typeプロパティをまったく設定しない場合、React Flowは"default"ベジエ曲線エッジタイプにフォールバックします。

これらのデフォルトのエッジは、edgeTypesプロップを他のものに設定した場合でも使用できます（これらのキーを直接オーバーライドしない限り）。