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

在React应用中将VideoId从列表传递到模态视频可以通过以下步骤实现：

首先，确保你已经安装了React和相关的依赖包。
创建一个VideoList组件，用于显示视频列表。在VideoList组件中，可以使用数组或API获取视频列表数据。
在VideoList组件中，为每个视频列表项添加一个点击事件处理函数。该函数将接收视频的VideoId作为参数，并将其保存到组件的状态中。
在点击事件处理函数中，使用React的状态更新函数将VideoId保存到组件的状态中。例如，可以使用useState钩子来管理VideoId状态：

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>
  );
};

创建一个ModalVideo组件，用于显示模态视频。该组件将接收VideoId作为属性，并在模态框中根据VideoId加载对应的视频内容。

import React from 'react';

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