response-responseive не работает с рендерингом на стороне сервера - PullRequest
Новая
       1

response-responseive не работает с рендерингом на стороне сервера

1 голос
/ 29 мая 2020

Я пытаюсь использовать реагирующие на условную визуализацию компоненты на основе ширины устройства. На стороне клиента все отлично работало, но для SSR я следовал документации, чтобы использовать Context для передачи определенной ширины c для начального рендеринга сервера. Тем не менее, ширина, которая получена в ответ на реакцию, теперь жестко установлена ​​на ширину в контексте, даже если я изменяю размер браузера.

Компонент для определения базы устройства по ширине устройства: 

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?

...