HistoryART
@HistoryART
^Спасибо - отметить ответом

Как заменять компонент при изменении окна?

Доброй ночи. Скажите пожалуйста, как я могу возвращать соответствующий компонент при изменении окна?

export default function TopBar() {

        return (
            <Router>

                <GetNavigationAndLogo />

            </Router>
        )

}

export const GetNavigationAndLogo = () => SelectNavigation(navigationItems);

const SelectNavigation = (menuItems) => {
    
    document.addEventListener('resize', () => {
        return window.innerWidth < 1000 && window.innerWidth > 700 ?
            getNavigationTablet(menuItems) :
            window.innerWidth < 700 ? getNavigationMobile(menuItems) :
                getNavigationPC(menuItems);
    });

    window.innerWidth < 1000 && window.innerWidth > 700 ?
        getNavigationTablet(menuItems) :
        window.innerWidth < 700 ? getNavigationMobile(menuItems) :
            getNavigationPC(menuItems);
    
};

Спасибо.
  • Вопрос задан
  • 70 просмотров
Решения вопроса 1
HistoryART
@HistoryART Автор вопроса
^Спасибо - отметить ответом
Обновлять приложение при ресайзе можно вот такой не хитрой конструкцией:

window.onresize = () => {
    ReactDOM.render(<App />, document.getElementById('root'));
};
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@matios
Technical Team Lead
Все просто. Добавить стейт в SelectNavigation и хранить там флаг нужного вида:
state: {
  view: 'pc'; //pc | tablet | 'mobile'
}


Далее при ресайзе нужно обновлять этот флаг в стейте в зависимости от ширины экрана.
А в рендер функции выводить getNavigationTablet, getNavigationMobile или getNavigationPC в зависимости от this.state.view.

Для того чтобы компонент перерисовался, вам нужно, чтобы у него обновился prop или state. В данном случае, если при ресайзе вы будите обновлять стейт, то компонент будет перерисовываться при изменении стейта.

PS. По скольку у вас функциональный компонент, то можно использовать хук "useState".
PS2. У вас ошибка в граничных условиях. Не правильное условие при width = 700. В вашем случае будет PC? а должно быть tablet или mobile.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы