<EdgeLabelRenderer />
边缘是基于 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
类。