如何将VideoId从列表传递到React模态视频

import React, { useState } from 'react';

const VideoList = () => {
  const [selectedVideoId, setSelectedVideoId] = useState(null);

  const handleVideoClick = (videoId) => {
    setSelectedVideoId(videoId);
  };

  return (
    <div>
      {/* 显示视频列表 */}
      {videoList.map((video) => (
        <div key={video.id} onClick={() => handleVideoClick(video.id)}>
          {video.title}
        </div>
      ))}

      {/* 显示模态视频 */}
      {selectedVideoId && <ModalVideo videoId={selectedVideoId} />}
    </div>
  );
};

import React from 'react';

const ModalVideo = ({ videoId }) => {
  return (
    <div>
      {/* 根据VideoId加载视频内容 */}
      <video src={`https://example.com/videos/${videoId}.mp4`} controls />
    </div>
  );
};