<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;

Props

名稱	類型
#`children`	`React.ReactNode`

注意事項

<EdgeLabelRenderer /> 預設沒有指標事件。如果您想要新增滑鼠互動，您需要設定樣式 pointerEvents: all，並在標籤或您想要互動的元素上新增 nopan 類別。

元件類型