React Flow使用自定义节点报错：无法创建边且节点不显示

错误提示[React Flow]: Couldn't create edge for source handle id: "null", edge id: e_user_id_order的核心原因是：自定义节点未添加React Flow要求的Handle组件。默认节点会自动包含用于连接边的输入/输出手柄，但自定义节点需要手动声明这些手柄，否则React Flow无法找到边的连接锚点，导致边创建失败，同时节点渲染也会出现异常。

1. 从reactflow导入Handle组件
2. 在自定义节点组件中添加至少一个source类型手柄（作为边的起点）和一个target类型手柄（作为边的终点）
3. 确保手柄的type属性设置正确，可通过position属性控制手柄在节点上的位置

import React, { useCallback } from 'react';
import ReactFlow, {
  useNodesState,
  useEdgesState,
  addEdge,
  Controls,
  MiniMap,
  Background,
  Handle, // 新增导入Handle组件
} from 'reactflow';
import 'reactflow/dist/style.css';

const CustomNode = ({ data, id }) => {
  return (
    <div
      style={{
        border: '1px solid #777',
        padding: '10px',
        borderRadius: '5px',
        width: 200,
      }}
    >
      {/* 输出手柄：作为边的起点，放在节点右侧 */}
      <Handle type="source" position="right" id={`${id}-source`} />
      {/* 输入手柄：作为边的终点，放在节点左侧 */}
      <Handle type="target" position="left" id={`${id}-target`} />
      <h3 style={{ margin: 0 }}>{data.title}</h3>
      <ul style={{ padding: 0, margin: '8px 0 0 0', listStyle: 'none' }}>
        {data.fields.map((field, index) => (
          <li key={`${id}-${index}`}>{field}</li>
        ))}
      </ul>
    </div>
  );
};

const initialNodes = [
  {
    id: 'table1',
    position: { x: 0, y: 0 },
    data: { title: 'Users', fields: ['user_id', 'username', 'email'] },
    type: 'custom',
  },
  {
    id: 'table2',
    position: { x: 300, y: 0 },
    data: { title: 'Orders', fields: ['order_id', 'user_id (FK)', 'product_id (FK)'] },
    type: 'custom',
  },
  {
    id: 'table3',
    position: { x: 600, y: 0 },
    data: { title: 'Products', fields: ['product_id', 'product_name'] },
    type: 'custom',
  },
];

const initialEdges = [
  {
    id: 'e_user_id_order',
    source: 'table1',
    target: 'table2',
    label: 'user_id joins user_id (FK)',
    style: { stroke: '#f00' },
  },
  {
    id: 'e_product_id_order',
    source: 'table3',
    target: 'table2',
    label: 'product_id joins product_id (FK)',
    arrowHeadType: 'arrowclosed',
  },
];

export default function DatabaseScheme() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );

  const nodeTypes = {
    custom: CustomNode,
  };

  return (
    <div style={{ width: '80vw', height: '80vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        nodeTypes={nodeTypes}
      >
        <Controls />
        <MiniMap />
        <Background variant="dots" gap={12} size={1} />
      </ReactFlow>
    </div>
  );
}

• 每个Handle需要设置唯一的id，这里用${id}-source和${id}-target确保唯一性
• 可根据需求调整Handle的position（left/right/top/bottom）和样式
• 如果需要给每个字段单独添加手柄，可以在fields.map循环中为每个字段生成对应的Handle，实现更精细的字段级连接

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