参考组件

<EdgeLabelRenderer />

GitHub 上的源代码

边缘是基于 SVG 的。如果您想渲染更复杂的标签,您可以使用 <EdgeLabelRenderer /> 组件来访问基于 div 的渲染器。此组件是一个门户,它在一个 <div /> 中渲染标签,该标签位于边缘的顶部。您可以在 边缘标签渲染器 示例中看到该组件的示例用法。

import React from 'react';
import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
 
const CustomEdge = ({ id, data, ...props }) => {
  const [edgePath, labelX, labelY] = getBezierPath(props);
 
  return (
    <>
      <BaseEdge id={id} path={edgePath} />
      <EdgeLabelRenderer>
        <div
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            background: '#ffcc00',
            padding: 10,
            borderRadius: 5,
            fontSize: 12,
            fontWeight: 700,
          }}
          className="nodrag nopan"
        >
          {data.label}
        </div>
      </EdgeLabelRenderer>
    </>
  );
};
 
export default CustomEdge;

属性

#children
React.ReactNode

说明

  • <EdgeLabelRenderer /> 默认情况下没有指针事件。如果您想添加鼠标交互,您需要设置样式 pointerEvents: all 并在标签或您想要与之交互的元素上添加 nopan 类。