React Js Carousel Image onclick play Video

如何解决React Js Carousel Image onclick play Video

在我的程序中，我需要在带有缩略图的轮播中制作视频。 当我点击需要播放的图像视频时。 正在存储存储在库中的视频和图像。

我使用以下代码来显示视频和图像。

public render(): React.ReactElement<IDucSpfxVideoProps> {    
    const imageClick = (index) => {           
      {this.state.videoURLs.map((imageList,index) => {                    
        return (<div>    
                 <video width="370" height="240" controls autoplay = {false} loop muted>
                 return <source key={index} src={imageList} type="video/mp4"/>;                 
                 </video>
        </div>)   
      })}   
    } 
    return (
       
                 {this.state.videoURLs.map((imageList,index) => {                    
                  return (<div>    
                 <video width="370" height="240" controls autoplay = {false} loop muted>
                 return <source key={index} src={imageList} type="video/mp4"/>;
                 </video>
                  </div>)   
                })}                
                      <Carousel showThumbs={true} autoplay={false} infiniteLoop={true} showIndicators={false} showStatus={true}>             
                {this.state.videoURLs.map((imageList,i) => {    
                  return (<div>    
                <img id={i.toString()} src={imageList} onClick={imageClick}/>
                  </div>)   
                })}   
              </Carousel>
            
    );
  
}
How to map while clicking a image in a thumbnail i need to play a video in a video source.

This is possible?

谢谢， 迪内什