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

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

6
reactjs responsive

3 ответов

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

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

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

Эй, я только что опубликовал пакет 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);
2

Это то же самое, что ответ но после присоединения вашей функции к 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 });
}
1