如何在reactJS中使用onClick播放多个视频的HTML5视频？

import React, { Component } from 'react';
import videojs from 'video.js';

class VideoPlayer extends Component {
  componentDidMount() {
    // 在组件加载完成后初始化视频播放器
    this.player = videojs(this.videoNode, this.props.options);
  }

  componentWillUnmount() {
    // 在组件卸载前销毁视频播放器
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div>
        <div data-vjs-player>
          <video
            ref={node => (this.videoNode = node)}
            className="video-js"
          />
        </div>
      </div>
    );
  }
}

class VideoPlaylist extends Component {
  handleVideoClick = (videoUrl) => {
    // 在点击事件中，更改当前视频的源并播放
    if (this.player) {
      this.player.src(videoUrl);
      this.player.play();
    }
  }

  render() {
    const videos = [
      { id: 1, url: 'video1.mp4' },
      { id: 2, url: 'video2.mp4' },
      { id: 3, url: 'video3.mp4' },
    ];

    return (
      <div>
        {videos.map(video => (
          <div key={video.id} onClick={() => this.handleVideoClick(video.url)}>
            Play Video {video.id}
          </div>
        ))}
        <VideoPlayer options={{}} />
      </div>
    );
  }
}