Чтобы перерисовать React-компонент при изменении размера окна браузера, нужно подписаться на событие resize и обновить состояние компонента новыми размерами. Слушатель должен правильно управляться, чтобы избежать утечек памяти.
componentDidMount()window.innerWidth и window.innerHeightcomponentWillUnmount(), чтобы освободить ресурсыthisclass WindowDimensions extends React.Component {
constructor(props) {
super(props);
this.state = { width: 0, height: 0 };
this.updateDimensions = this.updateDimensions.bind(this);
}
componentDidMount() {
this.updateDimensions();
window.addEventListener('resize', this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimensions);
}
updateDimensions() {
this.setState({
width: window.innerWidth,
height: window.innerHeight
});
}
render() {
return <span>{this.state.width} x {this.state.height}</span>;
}
}
updateDimensions() сразу в componentDidMount(), чтобы установить начальные размерыcomponentWillUnmount(), чтобы предотвратить утечки памятиВызов updateDimensions() сразу в componentDidMount() гарантирует, что компонент отобразит правильные начальные размеры до завершения первого рендера.
Новый — ещё не проверен сообществом
Вы