在两个组件之间的react中绘制直线

import React from 'react';

const Line = () => {
  return (
    <svg width="400" height="400">
      <line x1="50" y1="50" x2="350" y2="350" stroke="black" strokeWidth="2" />
    </svg>
  );
}

export default Line;

import React, { useEffect, useRef } from 'react';

const Line = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(50, 50);
    context.lineTo(350, 350);
    context.strokeStyle = 'black';
    context.lineWidth = 2;
    context.stroke();
  }, []);

  return <canvas ref={canvasRef} width="400" height="400" />;
}

export default Line;