Как определить, изменился ли размер экрана на мобильный в React?

Я разрабатываю веб-приложение с React и должен определить, когда размер экрана вошел в точку перехвата мобильного телефона, чтобы изменить состояние. В частности, мне нужно, чтобы мой sidenav был свернут, когда пользователь входит в мобильный режим, и который управляется логическим значением, сохраненным в состоянии в компоненте.

Ответ 1

Я добавил обработчик событий после монтирования компонента:

componentDidMount() {
    window.addEventListener("resize", this.resize.bind(this));
    this.resize();
}

resize() {
    this.setState({hideNav: window.innerWidth <= 760});
}

РЕДАКТИРОВАТЬ: Чтобы сохранить обновления состояния, я немного изменил "изменить размер", чтобы обновляться только при изменении ширины окна.

resize() {
    let currentHideNav = (window.innerWidth <= 760);
    if (currentHideNav !== this.state.hideNav) {
        this.setState({hideNav: currentHideNav});
    }
}

Ответ 2

Эй, я только что опубликовал пакет npm для этой проблемы. Проверьте https://www.npmjs.com/package/react-getscreen

import React, { Component } from 'react';
import {withGetScreen} from 'react-getscreen'

class Test extends Component {
  render() {
    if (this.props.isMobile()) return <div>Mobile</div>;
    if (this.props.isTablet()) return <div>Tablet</div>;
    return <div>Desktop</div>;
  }
}

export default withGetScreen(Test);

//or you may set your own breakpoints by providing an options object

const options = {mobileLimit: 500, tabletLimit: 800}
export default withGetScreen(Test, options);

Ответ 3

Это то же самое, что и этот ответ, но после присоединения вашей функции к eventListner, также удалите его на componentWillUnmount

constructor() {
  super();
  this.state = { screenWidth: null };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

componentDidMount() {
    window.addEventListener("resize", this.updateWindowDimensions());
}

componentWillUnmount() {
    window.removeEventListener("resize", this.updateWindowDimensions)
}

updateWindowDimensions() {
   this.setState({ screenWidth: window.innerWidth });
}