在reactjs中在画布上画4个圆

import React from 'react';

class Canvas extends React.Component {
  render() {
    return (
      <div>
        <canvas id="myCanvas" width="400" height="400"></canvas>
      </div>
    );
  }
}

export default Canvas;

import React from 'react';

class Canvas extends React.Component {
  componentDidMount() {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 绘制第一个圆形
    ctx.beginPath();
    ctx.arc(50, 50, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.fill();

    // 绘制第二个圆形
    ctx.beginPath();
    ctx.arc(100, 100, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'blue';
    ctx.fill();

    // 绘制第三个圆形
    ctx.beginPath();
    ctx.arc(150, 150, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'green';
    ctx.fill();

    // 绘制第四个圆形
    ctx.beginPath();
    ctx.arc(200, 200, 20, 0, 2 * Math.PI);
    ctx.fillStyle = 'yellow';
    ctx.fill();
  }

  render() {
    return (
      <div>
        <canvas id="myCanvas" width="400" height="400"></canvas>
      </div>
    );
  }
}

export default Canvas;

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

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>在ReactJS中画4个圆</h1>
        <Canvas />
      </div>
    );
  }
}

export default App;