<BaseEdge />

<BaseEdge /> 组件在内部用于所有边缘。它可以在自定义边缘内使用，并为你处理不可见的辅助边缘和边缘标签。

¥The <BaseEdge /> component gets used internally for all the edges. It can be used inside a custom edge and handles the invisible helper edge and the edge label for you.


import { BaseEdge } from '@xyflow/react';
 
export function CustomEdge({ sourceX, sourceY, targetX, targetY, ...props }) {
  const [edgePath] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });
 
  return <BaseEdge path={edgePath} {...props} />;
}

属性

¥Props

Name	Type
#`id`	`string`
#`style`	`React.CSSProperties`
#`interactionWidth`	`number` The width of the invisible area around the edge that the user can interact with. This is useful for making the edge easier to click or hover over.
#`path`	`string` The SVG path string that defines the edge. This should look something like 'M 0 0 L 100 100' for a simple line. The utility functions like getSimpleBezierEdge can be used to generate this string for you.
#`markerStart`	`string` The id of the SVG marker to use at the start of the edge. This should be defined in a <defs> element in a separate SVG document or element.
#`markerEnd`	`string` The id of the SVG marker to use at the end of the edge. This should be defined in a <defs> element in a separate SVG document or element.
#`label`	`string \| React.ReactNode` The label or custom element to render along the edge. This is commonly a text label or some custom controls.
#`labelX`	`number`
#`labelY`	`number`
#`labelStyle`	`React.CSSProperties`
#`labelShowBg`	`boolean`
#`labelBgStyle`	`React.CSSProperties`
#`labelBgPadding`	`[number, number]`
#`labelBgBorderRadius`	`number`

注释

¥Notes

如果你想将边缘标记与 <BaseEdge /> 组件一起使用，则可以将传递给自定义边缘的 markerStart 或 markerEnd 属性传递到 <BaseEdge /> 组件。你可以通过查看 EdgeProps 类型来查看传递给自定义边缘的所有属性。

¥If you want to use an edge marker with the <BaseEdge /> component, you can pass the markerStart or markerEnd props passed to your custom edge through to the <BaseEdge /> component. You can see all the props passed to a custom edge by looking at the EdgeProps type.