XYFlow/ReactFlow 自定义节点中边缘线不显示的解决方案

在 XYFlow（ReactFlow/SvelteFlow）项目中，开发者在使用自定义节点（customNodes）时可能会遇到边缘线（edges）不显示的问题。这是一个常见的技术挑战，但通过正确的实现方式可以轻松解决。

问题本质

当开发者创建自定义节点组件时，边缘线无法正确渲染的根本原因在于节点尺寸信息的缺失。ReactFlow 的内部机制需要准确的节点尺寸数据来计算边缘线的路径和连接点位置。

关键解决方案

必须处理节点变更事件

ReactFlow 要求开发者必须实现 onNodesChange 和 onEdgesChange 事件处理器，特别是要处理节点的尺寸变更：

const onNodesChange = useCallback(
  (changes) => {
    setNodes((nds) => applyNodeChanges(changes, nds));
  },
  []
);

const onEdgesChange = useCallback(
  (changes) => {
    setEdges((eds) => applyEdgeChanges(changes, eds));
  },
  []
);

节点尺寸测量的重要性

ReactFlow 会自动测量节点的实际尺寸，并将结果存储在节点的 measured 属性中（包含 width 和 height）。这些数据对于以下功能至关重要：

1. 边缘线的正确路径计算
2. 连接点的准确定位
3. 布局算法的正常运行

实现方案选择

开发者有两种主要实现方式：

方案一：使用默认节点（推荐简单场景）

<ReactFlow
  defaultNodes={nodes}
  defaultEdges={edges}
  nodeTypes={nodeTypes}
/>

这种方式下，ReactFlow 会内部管理所有变更，包括自动处理尺寸测量。

方案二：受控组件模式（推荐复杂场景）

const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);

// 必须实现变更处理器
const onNodesChange = useCallback(
  (changes) => {
    setNodes((nds) => applyNodeChanges(changes, nds));
  },
  []
);

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  nodeTypes={nodeTypes}
/>

在这种模式下，开发者需要显式处理所有变更，但可以获得完全的控制权。

自定义节点的实现要点

创建自定义节点组件时，需要注意：

1. 确保组件有明确的尺寸（通过CSS或内联样式）
2. 不要阻止ReactFlow的尺寸测量
3. 考虑响应式设计，处理尺寸变化

最佳实践建议

1. 即使是静态节点也要处理变更事件
2. 在开发过程中检查节点的 measured 属性
3. 对于复杂自定义节点，考虑添加尺寸检测
4. 使用ReactFlow提供的工具函数（如 applyNodeChanges）

通过遵循这些原则，开发者可以确保自定义节点和边缘线在XYFlow/ReactFlow中完美配合工作。