我如何在 React.js 中播放特定视频的模态视频（弹出的 React 视频播放器）onClick 事件

Question

我的组件中修改了多个视频。我需要做的就是，一旦我单击 on/play 一个特定的视频，就会出现一个弹出窗口，使用 reactjs 中的所有控件播放该视频。

Answer 1

你应该使用 React 门户，你可以 select 使用状态播放视频。

如果您自己存储了视频，或者即使您只有视频的 URL。在显示多个视频时，您必须使用 array/object，您可以复制 selection。理想情况下，这应该是您的应用程序的结构。根组件（弹出模态的组件）应该具有状态和回调（在 select 函数）应该传递给呈现多个视频的组件。这些视频中的每一个都必须在单击时调用 on select 函数（或您要使用的任何事件处理程序），然后在根组件中将布尔值设为真并根据它呈现视频

编辑：我相信我没有帮助选择特定的视频。同样，当您将它们呈现为列表时（我将该组件称为 VideoList，将每个视频称为 VideoItem）您将拥有一个根组件（称为 App），您可以具有以下结构：

App
    CallbackFuncToSelectVideoAndUpdateState(selectedVideo){

    }
    VideoModal//(initially set it as null or don't render anything using a boolean)
    VideoList
        VideoItem onClick=(item)=>CallbackFuncToSelectVideoAndUpdateState(item) id=videoItemId

VideoItem.js

handleClick(props.id){
    props.onClick(props.id)
}
return <div onClick=handleClick><otherComponentStructure/></div>

我如何在 React.js 中播放特定视频的模态视频（弹出的 React 视频播放器）onClick 事件

How can i play modal video(React video player on pop up) onClick event of a particular video in React.js

reactjs

video-player