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

Question

[ivanp83]

Добрый день! Помогите, пожалуйста, разобраться. Стоит задача при изменнении размера экрана пользователя изменять стейт 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 (













);
}}

);
}
};

Comments

[Роман Александрович]

вам нужно повесить event который будет вызываться при изменении размера окна.

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

вот пример.

[ivanp83]

Роман Александрович, я задал подобный event блоку обертке всей страницы : class PageWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
height: window.innerHeight,
width: window.innerWidth
};
}
componentDidMount() {
console.log(this.state.height);
window.addEventListener("resize", this.updateDimensions);
}
updateDimensions = () => {
this.setState({
height: window.innerHeight,
width: window.innerWidth
});
};
render() {
const childrenWithProps = React.Children.map(this.props.children, child =>
React.cloneElement(child, { width: this.state.width })
);
return {childrenWithProps};
}
}

export default PageWrapper;

не работал ранее с Context API не могу понять, как приязать обработчик к измнениею ситейта самого Context c isMobile : false на isMobile:true

[Роман Александрович]

ivanp83, не вижу componentWillUnmount

[ivanp83]

Роман Александрович, class PageWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
height: window.innerHeight,
width: window.innerWidth
};
}
componentDidMount() {
console.log(this.state.height);
window.addEventListener("resize", this.updateDimensions);
}
updateDimensions = () => {
this.setState({
height: window.innerHeight,
width: window.innerWidth
});
};
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
render() {
const childrenWithProps = React.Children.map(this.props.children, child =>
React.cloneElement(child, { width: this.state.width })
);
return {childrenWithProps};
}
}

export default PageWrapper;
Так, теперь добавил. до конца правда не понимаю зачем удалять слушатель перед размонтированием.

[Роман Александрович]

ivanp83, потому что есть вероятность что когда вы повторно откроете компонент у вас функция вызовется 2 раза и т.д.

[ivanp83]

Роман Александрович,ясно. спс. только я не понимаю, как привязать слушатель к изменению стейта в контесте?понимаю, что надо вызвать дополнительный обработчик, только в какой конкретно момент его вызывать?

[Роман Александрович]

ivanp83, я бы это сделал не с помощью контекста а с помощью HOC и ложил значение не в стейт а в редукс. Думаю так будет практичнее. Но у вас думаю своя реализация.

[ivanp83]

просто Redux для данного проекта избыточен. и уже все работaет с контестом. переделка грозит масштабным рефакторингом всего проекта))

Answer 1

[Роман Александрович]

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