javascript - react-responsive 不适用于服务器端渲染

Question

我正在尝试根据设备宽度使用对条件渲染组件的反应响应。在客户端一切都很好，但对于 SSR，我按照文档使用 Context 为初始服务器渲染传递特定宽度。但是，即使我调整浏览器的大小，react-responsive 收到的宽度现在也很难设置为 Context 中的宽度。

根据设备宽度定义设备的组件：

import { useMediaQuery } from 'react-responsive';

export const Desktop = ({ children }) => {
const isDesktop = useMediaQuery({ minWidth: 801 });
return isDesktop ? children : null;
};

export const Tablet = ({ children }) => {
const isTablet = useMediaQuery({ minWidth: 426, maxWidth: 800 });
return isTablet ? children : null;
};

export const Mobile = ({ children }) => {
const isMobile = useMediaQuery({ maxWidth: 425 });
return isMobile ? children : null;
};

export const MobileTablet = ({ children }) => {
const isMobile = useMediaQuery({ maxWidth: 800 });
return isMobile ? children : null;
};

我对 DeviceIdentifier 组件的使用：

...
     <Desktop>
        <CategoryTree />
     </Desktop>

...

      <MobileTablet>
        <BurgerMenu
          open={burgerMenuOpen}
          onOpenStateChange={setBurgerMenuOpen}
        />
      </MobileTablet>
...

_app.js 中的上下文包装器

import { Context as ResponsiveContext } from 'react-responsive';
...
<ResponsiveContext.Provider value={{ width: 1440 }}>
    <Component {...pageProps} />
</ResponsiveContext.Provider>
...

由于我将上下文中的宽度设置为 1440 像素，因此我的 BurgerMenu 组件当前从未呈现。有人知道如何让这个反应响应库在 SRR 中工作吗？

标签： javascriptreactjsserver-side-rendering

Answer 1

您能否检查一个window对象并将该宽度和硬代码1440用于服务器端：

import { Context as ResponsiveContext } from 'react-responsive';
...
<ResponsiveContext.Provider value={{ width: window.innerWidth || 1440 }}>
    <Component {...pageProps} />
</ResponsiveContext.Provider>
...