在React中使用进度条预加载图像和音频

import React, { useState, useEffect } from 'react';
import ProgressBar from 'react-bootstrap/ProgressBar';

function Preloader() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const images = [
      'image1.jpg',
      'image2.jpg',
      'image3.jpg'
    ];

    const audios = [
      'audio1.mp3',
      'audio2.mp3',
      'audio3.mp3'
    ];

    const totalFiles = images.length + audios.length;
    let loadedFiles = 0;

    const updateProgress = () => {
      loadedFiles++;
      const newProgress = Math.floor((loadedFiles / totalFiles) * 100);
      setProgress(newProgress);
    };

    const preloadImages = () => {
      images.forEach((image) => {
        const img = new Image();
        img.src = image;
        img.onload = updateProgress;
      });
    };

    const preloadAudios = () => {
      audios.forEach((audio) => {
        const audioObj = new Audio();
        audioObj.src = audio;
        audioObj.addEventListener('canplaythrough', updateProgress);
      });
    };

    preloadImages();
    preloadAudios();
  }, []);

  return (
    <div>
      <h1>Preloading Images and Audios</h1>
      <ProgressBar now={progress} label={`${progress}%`} />
    </div>
  );
}

function App() {
  return (
    <div>
      {/* 其他组件 */}
      <Preloader />
      {/* 其他组件 */}
    </div>
  );
}