ReactFlow组件Edges无法渲染的问题排查与技术求助

核心原因 #

自定义节点未配置连接手柄（Handle）。ReactFlow 的边需要依赖节点上的 Handle 组件来确定连接的起始/结束位置，纯自定义的 DOM 节点默认没有内置连接点，导致即使 source/target ID 匹配，边也无法渲染。

解决方案 #

1. 导入 Handle 组件 #

从 reactflow 库中引入 Handle 和位置枚举：

import { Handle, Position } from 'reactflow';

2. 在自定义节点中添加连接手柄 #

根据你垂直排列节点的布局，在节点顶部添加目标手柄、底部添加源手柄，让边能在节点间正确连接：

export default function ProblemNode({
  data: { number, name, acceptanceRate, difficulty },
}: NodeProps<{
  number: number;
  name: string;
  acceptanceRate: number;
  difficulty: number;
}>) {
  let borderColorClass: string;
  switch (difficulty) {
    case 0:
      borderColorClass = "border-green-500";
      break;
    case 1:
      borderColorClass = "border-orange-500";
      break;
    case 2:
      borderColorClass = "border-red-500";
      break;
    default:
      borderColorClass = "border-gray-500";
  }
  return (
    <div
      className={`bg-lightgrey border-2 ${borderColorClass} rounded-lg p-4 w-80 relative`}
    >
      {/* 顶部目标手柄，接收来自上方节点的边 */}
      <Handle
        type="target"
        position={Position.Top}
        className="bg-green-500"
      />
      <p className="text-white font-semibold">
        {number.toString() + ". " + name}
      </p>
      {/* 底部源手柄，发射到下方节点的边 */}
      <Handle
        type="source"
        position={Position.Bottom}
        className="bg-green-500"
      />
    </div>
  );
}

注意给节点容器添加 relative 类，确保手柄能基于节点正确定位。

3. 可选隐藏手柄 #

如果不需要显示可见的手柄，可添加 hidden 属性隐藏，但必须保留 Handle 组件让 ReactFlow 识别连接点：

<Handle type="target" position={Position.Top} hidden />
<Handle type="source" position={Position.Bottom} hidden />

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