在 React/JSX/NextJS 中有没有办法在单击 gif 时自动全屏打开视频？

如何解决在 React/JSX/NextJS 中有没有办法在单击 gif 时自动全屏打开视频？

用例：我有一个客户希望在他们的主页上有一个视频的 gif 版本，点击后会打开一个全屏视频播放器。我该如何管理？我一直在 NextJS 框架中构建网站。

我想做一些类似 this 的事情，但不是自动播放 mp4，而是自动循环播放视频的 gif，然后在点击 gif 时全屏播放 mp4。

任何帮助将不胜感激 - 我从来没有真正搞过 React 中的视频。

解决方法

我会创建一个反应状态并将其设置为 false 然后点击gif，我会将状态更新为true 然后有一个条件语句在状态变为真时全屏显示视频

并在视频从全屏中移除时将状态重新设置为 false

,

没有一种方法可以做到这一点，但 React 的美妙之处在于组件。你肯定是在朝着正确的方向前进。我实际上会做两个单独的组件，一个用于背景，另一个用于视频播放器。这是在代码中分离关注点的更清晰和良好的做法。

简单地有条件地交换组件，就像在这个简化的例子中一样；

if(onclick) {
  render (
    <Player />
  ) else {
    <Index />
 }
}

你可以很好地使用状态来设置条件。 React 中唯一的问题是组件在技术上不共享状态，但另一方面，“后台组件”只需要知道它是否在前台以及它是否收到 onClick 事件。视频组件只需要知道它自己的 onClick 就可以让它再次消失。因此，在这种非常特殊的情况下，两个单独的事件处理程序没有问题。