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

Question

[historydev]

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

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);
    
};

Спасибо.

Answer 1

[historydev]

Обновлять приложение при ресайзе можно вот такой не хитрой конструкцией:

window.onresize = () => {
    ReactDOM.render(<App />, document.getElementById('root'));
};

Answer 2

[Макс]

Все просто. Добавить стейт в SelectNavigation и хранить там флаг нужного вида:

state: {
  view: 'pc'; //pc | tablet | 'mobile'
}

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

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

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

Comments

[historydev]

Зачем мне столько операций? Я планировал изначально так, но в итоге сделал компонент который в зависимости от размера возвращает нужное и добавить ресайз слушатель на документ. Спасибо.

[Макс]

У вас там еще бага для граничного условия: width = 700

[Макс]

Владимир, В смысле зачем столько операций? Затем, что в противном случае компонент не перерисуется и меню не будет обновляться при ресайзе. А если у вас обновляется, значит у вас где-то с родителем проблема который ре-рендерится когда не надо. Вот яркий пример:
https://codesandbox.io/s/react-table-custom-pagina...

[Макс]

А вот пример с правильным рендерем: https://codesandbox.io/s/react-table-custom-pagina...
Только нужно правильно проставлять значение при первой инициализации

[historydev]

Макс, у меня всё обновляется, ответ я указал.

[Макс]

Владимир, Очень вредное решение. В реакте рендер - это самая дорогая операция. Хуже перерисовки ВСЕГО приложения при ресайзе, да еще и без throttle\debounce - это только утечка памяти.