React Flow：如何让连线在到达目标节点前分散开

可以通过两种核心方法实现这个需求，都是React Flow原生支持的自定义能力，直接动手配置即可：

方法一：给目标节点添加多个顶部锚点（推荐） #

React Flow的节点可以通过Handle组件定义多个连接点，让不同连线对应不同锚点，自然就能分散开。

步骤1：自定义目标节点组件 #

给「Validating Previous Actions」节点添加多个顶部的目标锚点，分别设置不同位置：

import { Handle, Position } from 'reactflow';

const ValidatingNode = ({ data }) => {
  return (
    <div className="bg-white border-2 rounded-md p-3 shadow-md">
      {/* 顶部三个分散的目标锚点 */}
      <Handle
        type="target"
        position={Position.Top}
        id="top-left"
        style={{ left: '25%', top: '-6px', backgroundColor: '#555' }}
      />
      <Handle
        type="target"
        position={Position.Top}
        id="top-center"
        style={{ left: '50%', top: '-6px', backgroundColor: '#555' }}
      />
      <Handle
        type="target"
        position={Position.Top}
        id="top-right"
        style={{ left: '75%', top: '-6px', backgroundColor: '#555' }}
      />
      <div className="font-medium">{data.label}</div>
    </div>
  );
};

步骤2：给连线指定对应锚点 #

定义连线时，通过targetHandleId字段绑定到不同的锚点ID：

const edges = [
  { id: 'edge-1', source: 'node-a', target: 'validating-node', targetHandleId: 'top-left' },
  { id: 'edge-2', source: 'node-b', target: 'validating-node', targetHandleId: 'top-center' },
  { id: 'edge-3', source: 'node-c', target: 'validating-node', targetHandleId: 'top-right' },
];

这样每条连线会精准连到目标节点顶部的不同位置，完全实现分散效果，还能直观控制间距。

方法二：自定义连线组件，动态调整终点位置 #

如果不想用多锚点，可以自定义连线逻辑，根据连线的标识动态修改终点坐标：

自定义连线组件 #

import { getBezierPath, EdgeProps } from 'reactflow';

const SpreadEdge = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style }) => {
  // 从连线ID提取索引，计算偏移量（假设目标节点宽度200px）
  const edgeIdx = Number(id.split('-')[1]);
  const offset = (edgeIdx - 2) * 50; // 三条线分别偏移-50、0、+50px
  
  // 调整目标节点的X坐标
  const adjustedTargetX = targetX + offset;
  
  // 生成贝塞尔路径
  const [path] = getBezierPath({
    sourceX, sourceY,
    targetX: adjustedTargetX, targetY,
    sourcePosition, targetPosition
  });

  return (
    <path 
      d={path} 
      style={{ ...style, strokeWidth: 2, fill: 'none' }}
      markerEnd={`url(#arrowhead-${id})`}
    />
  );
};

在ReactFlow中使用自定义连线 #

<ReactFlow
  nodes={nodes}
  edges={edges.map(edge => ({ ...edge, type: 'spread' }))}
  edgeTypes={{ spread: SpreadEdge }}
  // 其他配置项
/>

这种方法适合不需要锚点交互的场景，但需要提前估算目标节点宽度，灵活性不如多锚点方案。

内容的提问来源于stack exchange，提问作者MatTaNg