ReactFlow中如何用图片替代普通Node实现拖拽与连线？

React Flow完全支持用图片替代节点，同时保留拖拽移动和节点间连线的能力，下面是具体实现步骤：

1. 自定义图片节点组件 #

创建一个自定义节点组件，用<img>标签渲染图片，同时通过Handle组件添加连线锚点：

import React from 'react';
import { Handle, Position } from 'reactflow';

const ImageNode = ({ data, selected }) => {
  return (
    <div 
      style={{ 
        padding: 0, 
        border: selected ? '2px solid #1890ff' : 'none',
        borderRadius: 4,
        cursor: 'move'
      }}
    >
      {/* 左侧添加入口连线点 */}
      <Handle type="target" position={Position.Left} />
      <img 
        src={data.imageUrl} 
        alt="节点图片" 
        style={{ 
          width: '100%', 
          height: 'auto', 
          borderRadius: 4,
          display: 'block'
        }}
      />
      {/* 右侧添加出口连线点 */}
      <Handle type="source" position={Position.Right} />
    </div>
  );
};

export default ImageNode;

2. 在主组件中集成自定义节点 #

在React Flow容器组件中注册自定义节点类型，初始化节点和连线数据，并处理相关交互逻辑：

import React, { useState } from 'react';
import ReactFlow, { 
  Background, 
  Controls, 
  MiniMap,
  addEdge,
  applyNodeChanges,
  applyEdgeChanges
} from 'reactflow';
import 'reactflow/dist/style.css';
import ImageNode from './ImageNode';

// 注册自定义节点类型
const nodeTypes = {
  image: ImageNode,
};

const App = () => {
  // 初始化节点和连线数据
  const [nodes, setNodes] = useState([
    {
      id: '1',
      type: 'image',
      position: { x: 100, y: 100 },
      data: { imageUrl: '/path/to/your/image1.jpg' },
    },
    {
      id: '2',
      type: 'image',
      position: { x: 400, y: 100 },
      data: { imageUrl: '/path/to/your/image2.jpg' },
    },
  ]);
  const [edges, setEdges] = useState([
    { id: 'e1-2', source: '1', target: '2' },
  ]);

  // 处理节点拖拽、删除等变化
  const onNodesChange = (changes) => {
    setNodes((nds) => applyNodeChanges(changes, nds));
  };

  // 处理连线创建、删除等变化
  const onEdgesChange = (changes) => {
    setEdges((eds) => applyEdgeChanges(changes, eds));
  };

  // 处理新连线的创建
  const onConnect = (connection) => {
    setEdges((eds) => addEdge(connection, eds));
  };

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        nodeTypes={nodeTypes}
        fitView
      >
        <Background />
        <Controls />
        <MiniMap />
      </ReactFlow>
    </div>
  );
};

export default App;

3. 核心注意事项 #

• Handle组件是实现节点间连线的关键，可根据需求调整它的位置（上、下、左、右）和数量
• 节点的拖拽能力是React Flow内置的，只要自定义节点没有阻止默认鼠标事件，就能直接拖拽移动
• 若需要限制拖拽范围或自定义拖拽行为，可以在自定义节点中监听onDrag事件，或配置React Flow的nodeDragHandle属性

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