Question

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

我仍然可以与主页进行互动，类似于this网站，当您点击跟踪时右下角有一个小的弹出视频。

我使用YouTube API <{1}}

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} />) } }这项功能我点击了跟踪功能，只需将YouTube视频加载到我的页面顶部。

Here是我的学校项目。

Answer 1

由于这比业务逻辑更多地描述了DOM行为，因此您可以在特定组件中放入任何您想要的行为（如果通过交换css类或根据特定条件设置内联样式）。

为了使这个模态可以重复使用，我建议你使用higher order component来包裹<Youtube />组件或任何你想用模态显示的组件。

例如，您可以

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

然后，您可以设置modal类的样式，使其行为类似于模态。

在您希望显示模态的视图上，您可以渲染

Modal(Youtube, props)

如何使用不影响主页的YouTube视频制作弹出窗口？

1 个答案: