Question

我试图基于设备宽度对条件渲染组件使用反应响应。一切都在客户端上运行良好，但是对于SSR，我遵循文档使用Context为初始服务器渲染传递特定宽度。但是，即使我调整了浏览器的大小，响应响应收到的宽度现在也很难设置为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>
...

由于我在上下文1440px中设置了宽度，因此我的BurgerMenu组件当前从未渲染。有人知道如何在SRR中使此响应式库起作用吗？

反应响应式不适用于服务器端渲染

0 个答案: