有没有在TypeScript & React中构建水平罗盘的方法？

import React, { Component } from 'react';

interface CompassProps {
  angle: number;
}

class Compass extends Component<CompassProps> {
  private canvasRef: React.RefObject<HTMLCanvasElement>;
  private ctx: CanvasRenderingContext2D | null;

  constructor(props: CompassProps) {
    super(props);
    this.canvasRef = React.createRef();
    this.ctx = null;
  }

  componentDidMount() {
    const canvas = this.canvasRef.current;
    if (canvas) {
      this.ctx = canvas.getContext('2d');
    }
  }

  componentDidUpdate() {
    const { angle } = this.props;
    if (this.ctx) {
      const canvas = this.canvasRef.current;
      if (canvas) {
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = Math.min(centerX, centerY) - 10;

        this.ctx.clearRect(0, 0, canvas.width, canvas.height);
        this.ctx.beginPath();
        this.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        this.ctx.stroke();

        const endX = centerX + radius * Math.cos(angle);
        const endY = centerY + radius * Math.sin(angle);

        this.ctx.beginPath();
        this.ctx.moveTo(centerX, centerY);
        this.ctx.lineTo(endX, endY);
        this.ctx.stroke();
      }
    }
  }

  render() {
    return <canvas ref={this.canvasRef} width={200} height={200} />;
  }
}

export default Compass;