React Flow自定义节点类型后连线无法渲染的问题求助

问题根源是你的自定义TextUpdaterNode组件没有配置连接锚点（handles），React Flow需要节点上存在可识别的连接区域才能渲染连线。默认节点类型自带这些锚点，所以移除type属性后连线能正常显示。

修复步骤 #

修改你的TextUpdaterNode.js组件，添加输入和输出锚点：

import { Handle, Position } from 'reactflow';

const TextUpdaterNode = ({ data }) => {
  return (
    <div style={{ padding: '10px', border: '1px solid #ccc', borderRadius: '4px' }}>
      {/* 顶部输入锚点 */}
      <Handle type="target" position={Position.Top} />
      <div>{data?.label || '自定义节点'}</div>
      {/* 底部输出锚点 */}
      <Handle type="source" position={Position.Bottom} />
    </div>
  );
};

export default TextUpdaterNode;

关键说明 #

• 必须通过reactflow导出的Handle组件定义节点的连接锚点，指定type（source为输出端，target为输入端）和position（锚点位置）
• 自定义节点需要接收React Flow传递的props，比如data用于传递节点自定义数据
• 若需要更灵活的连接方式，可将position调整为Left/Right，或添加多个锚点

另外，建议给初始节点补充自定义数据字段，让节点内容更清晰：

const initialNodes = [
  {
    id: "1",
    position: { x: 0, y: 0 },
    type: "textUpdater",
    data: { label: '节点1' }
  },
  {
    id: "2",
    position: { x: 0, y: 100 },
    type: "textUpdater",
    data: { label: '节点2' }
  }
];

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