Wie zu erkennen, wenn der Bildschirm die Größe hat sich verändert, um mobile-in Reagieren?

Ich bin der Entwicklung einer web-app mit Reagieren und müssen erkennen, wenn der Bildschirm-Größe ist in den mobile-Pause-Punkt, um den Zustand ändern. Speziell brauche ich meine sidenav, reduziert werden, wenn der Benutzer den mobilen Modus und gesteuert wird, mit einem Wert, gespeichert in dem Zustand innerhalb der Komponente.

InformationsquelleAutor Embedded_Mugs | 2017-06-11

  1. 22

    Was ich tun ist das hinzufügen eines event-listener-Komponente nach mount:

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

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

    BEARBEITEN:
    Speichern Status-updates, ich habe die "Größe" ein bisschen, nur aktualisiert werden, wenn nötig.

    resize() {
    let currentHideNav = (window.innerWidth <= 760);
    if (currentHideNav !== this.state.hideNav) {
        this.setState({hideNav: hideNcurrentHideNav});
    }
}
    Sie wollen debounce oder gedrosselt werden, dass Ereignis-listener. Finden Sie Beispiele für beide hier.

    InformationsquelleAutor Ben Cohen

  2. 2

    hey ich habe gerade veröffentlichte ein npm-Paket für dieses Problem.
    Check it out 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);
    Wenn Sie mich Fragen, sollten die Browser machen es einfacher, um den physikalischen Bildschirm-Größe, anstatt nur die Auflösung, da die Pixeldichte so viel variieren...
    Meiner Erfahrung nach Komponenten, legen Sie selbst heraus, basierend auf der Display-Größe sind weniger wiederverwendbar, weil wenn Sie waren, um Sie in einer 2 x 2-raster zum Beispiel, Sie machen würde, als wären Sie die Größe des gesamten Bildschirms, anstatt zu einem Viertel.
    gut, addons wie diese, sollte nur verwendet werden, auf so etwas wie container-Komponenten
    Ja, Sie sind in Ordnung für den Fall, dass

    InformationsquelleAutor Calin ortan

  3. 2

    Dies ist das gleiche wie diese Antwort aber nach dem anbringen Ihrer Funktion eventListner, auch entfernen Sie es auf 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 });
}

    InformationsquelleAutor Muneeb JS

Schreibe einen Kommentar