reactjs - 如何使用不影响主页的YouTube视频创建弹出窗口？

Question

我正在尝试使用不影响主页的YouTube视频弹出窗口。

当您单击“跟踪”时，我仍然可以与主页交互，类似于this网站上的右下角的弹出视频。

我的YouTube API有App.js

{     
  getYouTubeApi = (searchTerms1, searchTerms2) => {
    fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&q=${searchTerms1} ${searchTerms2}&type=video&key=YOUR_KEY`)
    .then(res=>res.json())
    .then(data=>{
      this.setState({videoId: data.items[0].id.videoId})
    })
  .catch(error=>console.log(error))
  }

render(){
  return (<YouTube opts={opts} videoId={this.state.videoId} />)
  }
}

getYouTubeApi函数，我单击的是单击轨道，该轨道刚刚到达YouTube视频加载页面的顶部。

Here是我的学校项目。

Answer 1

因为这比对业务逻辑更能描述DOM行为，所以您可以将所需的任何内容放入行为类似于模式的特定组件中(无论是换出css类还是根据某些条件设置内联样式)。

为了使该模式可重用，建议您将其设置为higher order component，以包装<Youtube />组件或要使用模式显示的任何其他组件。

例如，您可能有

const Modal = (ComponentToDisplayAsModal, props) => (
  <div class="modal">
   <ComponentToDisplayAsModal {...props} />
  </div>
)

然后，您可以将modal类的样式设置为类似于模式。

在要显示模态的 View 上，可以渲染

Modal(Youtube, props)