React中的跟踪SVG图像加载

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

const SVGImage = ({ src }) => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const image = new Image();
    image.src = src;

    image.onload = () => {
      setIsLoading(false);
    };

    return () => {
      image.onload = null;
    };
  }, [src]);

  return (
    <div>
      {isLoading ? (
        <div>Loading...</div>
      ) : (
        <svg>
          <image xlinkHref={src} />
        </svg>
      )}
    </div>
  );
};

export default SVGImage;

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

const App = () => {
  return (
    <div>
      <h1>React SVG Image</h1>
      <SVGImage src="/path/to/image.svg" />
    </div>
  );
};

export default App;