如何用canvas在react中创建“连接点”风格的地图？

import React from 'react';
import Canvas from 'react-canvas';

class Map extends React.Component {
  render() {
    return (
      <Canvas>
        {/* 在这里绘制地图 */}
      </Canvas>
    );
  }
}

export default Map;

import React from 'react';
import Canvas from 'react-canvas';

class Map extends React.Component {
  componentDidMount() {
    const canvas = this.canvas.getCanvas();
    const ctx = canvas.getContext('2d');

    // 绘制连接点
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(50, 50, 10, 0, 2 * Math.PI);
    ctx.fill();

    // 绘制线条
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 100);
    ctx.stroke();
  }

  render() {
    return (
      <Canvas ref={ref => (this.canvas = ref)}>
        {/* 在这里绘制地图 */}
      </Canvas>
    );
  }
}

export default Map;

import React from 'react';
import Map from './Map';

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 其他组件 */}
        <Map />
        {/* 其他组件 */}
      </div>
    );
  }
}

export default App;