react svga动画加载

import { FC, useEffect, useRef } from 'react';
import { Parser, Player } from 'svga';

interface SvgaDemoProps {
  ImgSrc: string;
  SvgaName: string;
}

const SvgaDemo: FC<SvgaDemoProps> = ({ ImgSrc, SvgaName }) => {
  const playerRef: any = useRef(null); // 用于存储 SVGA Player 的引用

  const loadSVGA = async () => {
  	const parser = new Parser();
    const svga = await parser.load(ImgSrc);
    const canvasId = `canvas${SvgaName}`;
    const el: any = document.getElementById(canvasId);
    if (!playerRef.current) {
      playerRef.current = new Player(el);
    }
    await playerRef.current.mount(svga);
    playerRef.current.start();
  };

  useEffect(() => {
    loadSVGA();

    return () => {
      // 清理函数，用于卸载 SVGA 动画
      if (playerRef.current) {
        playerRef.current.stop();
        playerRef.current.clear(); // 更彻底的清理方式
        playerRef.current = null;
      }
    };
  }, [ImgSrc]); // 依赖于 ImgSrc

  return (
    <div>
      <canvas
        style={{ width: '100%', height: '100%' }}
        id={`canvas${SvgaName}`}
      ></canvas>
    </div>
  );
};

export default SvgaDemo;