在react js中更改幻灯片时是否暂停视频？

import React, { useState } from 'react';

const App = () => {
  const [slideIndex, setSlideIndex] = useState(0);
  const [isVideoPlaying, setIsVideoPlaying] = useState(false);

  const handleSlideChange = (index) => {
    setSlideIndex(index);
    if (isVideoPlaying) {
      // 暂停视频的代码
    }
  };

  const handleVideoPlay = () => {
    setIsVideoPlaying(true);
  };

  const handleVideoPause = () => {
    setIsVideoPlaying(false);
  };

  // 渲染幻灯片和视频组件
  return (
    <div>
      <Slides slideIndex={slideIndex} onSlideChange={handleSlideChange} />
      <Video
        src="video.mp4"
        isPlaying={isVideoPlaying}
        onPlay={handleVideoPlay}
        onPause={handleVideoPause}
      />
    </div>
  );
};

export default App;

const Slides = ({ slideIndex, onSlideChange }) => {
  const handleNextSlide = () => {
    onSlideChange(slideIndex + 1);
  };

  const handlePrevSlide = () => {
    onSlideChange(slideIndex - 1);
  };

  return (
    <div>
      <button onClick={handlePrevSlide}>Previous Slide</button>
      <button onClick={handleNextSlide}>Next Slide</button>
      {/* 渲染幻灯片内容 */}
    </div>
  );
};

const Video = ({ src, isPlaying, onPlay, onPause }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    if (isPlaying) {
      videoRef.current.play();
    } else {
      videoRef.current.pause();
    }
  }, [isPlaying]);

  return (
    <video ref={videoRef} src={src} onPlay={onPlay} onPause={onPause} />
  );
};