web-dev-qa-db-fra.com

Comment détecter si la taille de l'écran a changé en mobile dans React?

Je développe une application Web avec React et je dois détecter le moment où la taille de l'écran est entrée dans le point de rupture du mobile afin de modifier l'état. Plus précisément, j'ai besoin que mon sidenav soit réduit lorsque l'utilisateur passe en mode mobile et qu'il est contrôlé par un booléen stocké dans l'état du composant.

reactjsresponsive
7
Embedded_Mugs

Ce que je fais est d'ajouter un écouteur d'événement après le montage du composant:

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

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

EDIT: Pour sauvegarder les mises à jour de l’état, j’ai un peu modifié le "redimensionnement", juste pour être mis à jour si nécessaire.

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

hé je viens de publier un package npm pour ce numéro . Découvrez-le 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
Calin ortan

Ceci est identique à cette réponse mais après avoir attaché votre fonction à l'événement Listener, supprimez-la également sur composantWillUnmount

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
Muneeb JS