@ivanp83

Reactjs Context API как изменить стейт при изменении размера экрана пользователя?

Добрый день! Помогите, пожалуйста, разобраться. Стоит задача при изменнении размера экрана пользователя изменять стейт Context. От этого стейт зависит применение конкретных стилей всего приложения. Есть разделение на мобильную и версию для ПК. Состояние isMobile отвечает за эту опцию. Необходимо манипулировать конкретно им и при измнении размера браузера вызывать его измнение. Не понимаю в какой конкретный момент это делать.
Стейт хранится тут:
class ProductProvider extends Component {
state = {
isMobile: false,
sidebarOpen: false,
loading: true

handleIsMobileMode = () => {
this.setState({ isMobile: !this.state.isMobile });
};

handleSidebar = () => {
this.setState({ sidebarOpen: !this.state.sidebarOpen });
};

closeSideBar = () => {
this.setState({ sidebarOpen: false });
};

render() {
return (
value={{
...this.state,
handleSidebar: this.handleSidebar,
closeSideBar: this.closeSideBar,
handleIsMobileMode: this.handleIsMobileMode
}}
>
{this.props.children}

);
}
}
Тригер изменения состояния isMobile с falase на true необходимо вызвать тут: const App = ({ width }) => {
const location = useLocation();
const routesArray = [];
menuData.forEach(item => {
item.items.forEach((element, index) => {
routesArray.push(
path={`/${element.slug}`}
key={index}
exact
component={() => }
/>
);
});
});
if (width > 756) {
return (








{routesArray}




);
} else {
return (

{value => {
const { isMobile, handleIsMobileMode } = value;
return (













);
}}

);
}
};
  • Вопрос задан
  • 2586 просмотров
Пригласить эксперта
Ответы на вопрос 1
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
import React from 'react';

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };
  render() {
    return <span>Window size: {this.state.width} x {this.state.height}</span>;
  }
  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  };
  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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