如何用React实现带连接线的页面元素？是否有对应组件包？

一、手动实现思路 #

如果不想依赖第三方包，可以用SVG或者Canvas来实现：

1. 用React组件渲染各个节点元素，通过useRef获取每个节点的DOM位置（坐标、宽高）。
2. 在节点外层嵌套SVG容器，用<line>或<path>标签绘制节点间的连接线，根据节点的位置计算连线的起点和终点坐标。
3. 监听窗口 resize 或者节点位置变化事件，动态更新连线的坐标，保证连线始终准确。

举个极简示例：

import { useRef, useState } from 'react';

const Node = ({ id, children, position }) => {
  const nodeRef = useRef(null);
  return (
    <div 
      ref={nodeRef}
      style={{
        position: 'absolute',
        left: position.x,
        top: position.y,
        width: 100,
        height: 60,
        border: '1px solid #333',
        padding: 10,
        backgroundColor: '#fff'
      }}
    >
      {children}
    </div>
  );
};

const ConnectedNodes = () => {
  const nodes = [
    { id: '1', position: { x: 50, y: 50 }, label: '节点1' },
    { id: '2', position: { x: 250, y: 50 }, label: '节点2' },
    { id: '3', position: { x: 150, y: 150 }, label: '节点3' }
  ];
  const edges = [
    { from: '1', to: '3' },
    { from: '2', to: '3' }
  ];

  return (
    <div style={{ position: 'relative', width: '100%', height: 300 }}>
      {nodes.map(node => <Node key={node.id} {...node} />)}
      <svg style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
        {edges.map((edge, idx) => {
          const fromNode = nodes.find(n => n.id === edge.from);
          const toNode = nodes.find(n => n.id === edge.to);
          // 计算连线起点（节点右侧中点）和终点（节点左侧中点）
          const startX = fromNode.position.x + 100;
          const startY = fromNode.position.y + 30;
          const endX = toNode.position.x;
          const endY = toNode.position.y + 30;
          return (
            <line
              key={idx}
              x1={startX} y1={startY}
              x2={endX} y2={endY}
              stroke="#333"
              strokeWidth="2"
            />
          );
        })}
      </svg>
    </div>
  );
};

export default ConnectedNodes;

二、推荐的第三方组件包 #

这类场景已经有成熟的开源组件包，无需重复造轮子：

• React Flow：最流行的节点图/流程图库，支持拖拽、节点自定义、连线编辑、缩放等功能，适合快速搭建复杂的节点连线页面。安装命令：npm install reactflow，核心用<ReactFlow>组件，传入nodes和edges数组即可渲染。
• React Digraph：专注于有向图的绘制，内置节点拖拽、连线自动生成等功能，适合需要严格层级关系的流程图场景。
• Ant Design Graphs：基于G6封装的React组件，支持多种图表类型（包括流程图、关系图），自带丰富的交互和样式配置，适合企业级项目。

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