ConnectionLineComponentProps

如果你想为连接线渲染自定义组件，你可以在 <ReactFlow /> 组件上设置 connectionLineComponent prop。ConnectionLineComponentProps 传递给你的自定义组件。

¥If you want to render a custom component for connection lines, you can set the connectionLineComponent prop on the <ReactFlow /> component. The ConnectionLineComponentProps are passed to your custom component.


export type ConnectionLineComponentProps = {
  connectionLineStyle?: React.CSSProperties;
  connectionLineType: ConnectionLineType;
  fromNode?: Node;
  fromHandle?: Handle;
  fromX: number;
  fromY: number;
  toX: number;
  toY: number;
  fromPosition: Position;
  toPosition: Position;
  connectionStatus: 'valid' | 'invalid' | null;
};

属性

¥Props

Name	Type
#`connectionLineStyle?`	`React.CSSProperties`
#`connectionLineType`	`ConnectionLineType`
#`fromNode?`	`Node` The node the connection line originates from.
#`fromHandle?`	`Handle` The handle on the fromNode that the connection line originates from.
#`fromX`	`number`
#`fromY`	`number`
#`toX`	`number`
#`toY`	`number`
#`fromPosition`	`Position`
#`toPosition`	`Position`
#`connectionStatus`	`"valid" \| "invalid" \| null` If there is an isValidConnection callback, this prop will be set to "valid" or "invalid" based on the return value of that callback. Otherwise, it will be null.