我试图基于设备宽度对条件渲染组件使用反应响应。一切都在客户端上运行良好,但是对于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中使此响应式库起作用吗?