Блог

Главная - Вопросы по программированию - NextJS: Компоненты неправильно переключаются при открытии приложения на мобильном устройстве

NextJS: Компоненты неправильно переключаются при открытии приложения на мобильном устройстве

#reactjs #next.js

Вопрос:

В настоящее время я использую «реагирующую реакцию» для включения или выключения некоторых компонентов в зависимости от того, просматривается ли приложение на рабочем столе или мобильном устройстве.

Упрощенный пример:

 import { useMediaQuery } from 'react-responsive'

export default function MyComponent(props) {
    const isMobile = useMediaQuery({ query: `(max-width: 480px)` })

    return (
        <Wrapper>
            { isMobile ? <ComponentMobile /> : <ComponentDesktop /> }
        </Wrapper>
    )
}

Когда я перемещаюсь со страницы на страницу в приложении, это работает идеально, но когда я открываю веб-сайт в первый раз, все компоненты неверны (все еще отображают ComponentDesktop), даже если я нахожусь на мобильном телефоне.

Я предполагаю, что компонент отображается на сервере, и когда дело доходит до интерфейса, он не обновляется.

Каков правильный метод для этого?

Большое спасибо!

Ответ №1:

Недавно столкнулся с аналогичной проблемой, в итоге показал или скрыл компоненты с помощью CSS. В пользовательском интерфейсе Material есть скрытый компонент, который позволяет вам легко делать это с помощью CSS, но, безусловно, есть и другие решения.

Смотрите это видео от Vercel для нескольких возможных реализаций: https://www.youtube.com/watch?v=K7g8X_VRDy8

Проверка пользовательского агента также возможна, но лично мне нравится идея CSS просто потому, что она автоматически отображает или скрывает компоненты в зависимости от ширины экрана, но она, безусловно, не идеальна.

Метки: