React 响应式和动态视频网格

Posted 2023-02-22

【中文标题】React 响应式和动态视频网格

【英文标题】：React Responsive and dynamic Video Grid

【发布时间】：2021-09-04 13:16:41

【问题描述】：

大家好，我正在做一个项目，我想要一个动态的 div 网格，它可以自动填充屏幕空间，就像 google meet 对会议参与者所做的那样。而且我正在努力实现我正在使用带有 nextjs 的 tailwind css，但无法弄清楚如何制作像 google meet 这样的网格。

return (
            <div className="flex flex-row h-full w-full">
                <div className="relative flex h-full w-full pb-16 ">
                    <FooterMeeting
                        isMessagesOpen=isMessagesOpen
                        toggleMessages=() => 
                            setisMessagesOpen(!isMessagesOpen)
                        
                        audioPermession=audioPermession
                        cameraPermession=cameraPermession
                        toggleVideo=toggleVideo
                        toggleAudio=toggleAudio
                    />
                    <div className="flex w-full h-full p-2">
                        <div className="grid w-full grid-flow-col grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-3 xl:grid-cols-4 xl:grid-rows-3 gap-2 justify-start overflow-x-scroll scrollDiv">
                            <VideoView />
                            <VideoView />
                            <VideoView />
                            <VideoView />
                        </div>
                    </div>
                </div>
                <MessagesSidebar isMessagesOpen=isMessagesOpen closeMessages=() =>  setisMessagesOpen(false)  />
            </div>
        )

以上是网格 div 的 jsx，VideoView 为孩子的

const VideoView = (props) => 
    //refs
    const mainDiv = useRef();

    //state
    const [divHeight, setdivHeight] = useState(0)

    //lifecycle
    useLayoutEffect(() => 
        if (mainDiv.current) 
            setdivHeight(mainDiv.current.offsetWidth / 2)
        
        return () => 

        ;
    , [])
    //methods

    //views
    return (
        <div ref=mainDiv style= height: divHeight  className=" relative flex w-full h-auto bg-gray-300 dark:bg-appColor-appLight rounded-xl justify-center items-center">
            <video className=" h-auto max-w-full rounded-xl overflow-hidden flipVideo object-cover" />
        </div>
    )

上面是 VideoView 组件

这是当前问题的截图

如果你能帮忙就太好了！！

【参考方案1】：

你想调整这部分代码：

   <div className="grid w-full grid-flow-col grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-3 xl:grid-cols-4 xl:grid-rows-3 gap-2 justify-start overflow-x-scroll scrollDiv">
           <VideoView />
           <VideoView />
           <VideoView />
           <VideoView />
   </div>

                     

只需更改类名

className="grid grid-cols-2 gap-0"

这将创建 2 X 2 系统。如果你有 6 ，它将成为 3X2。但是如果你想要更多的控制，你可以写在一个 css 文件中。

className="container"

组件.css

.container
    // specify how many cols you want
    @apply grid gap-0 grid-cols-3
    
  // ' >* ' means target all of the children 
  // we are able to use '&' with postcss-nesting plugin
   &>*
    @apply overflow-hidden;
    height:300px;
    max-height:500px;
  // or specify the height based on screen size 
  // sm-md-lg-x1-2x1
    @screen lg
      height:400px