如何使用react和canvg库在画布中添加文本？

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

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

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 使用canvg库将SVG转换为Canvas
    const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><text x="50" y="50">Hello, World!</text></svg>';
    canvg(canvas, svg);

    // 在画布上绘制文本
    ctx.font = '20px Arial';
    ctx.fillText('Hello, World!', 50, 50);
  }, []);

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

const App = () => {
  return (
    <div>
      <h1>使用React和canvg库在画布中添加文本</h1>
      <CanvasComponent />
    </div>
  );
};