Reagieren Sie bedingt auf der Größe des Darstellungsbereichs.

Question

Dies sollte ein einfacher für Sie sein Reagieren Sie Monster. :) Ich habe die Bedingung geschrieben, aber ich kann nicht herausfinden, wie die Viewport-Größe in meinem Konstruktor behandelt wird, damit die Bedingung funktioniert. Ganz einfach: Ich möchte ein Element anzeigen, wenn die Größe des Darstellungsbereichs 1451 Pixel oder größer ist, und ein anderes, wenn 1450 Pixel oder kleiner ist.

Dies ist mein Code (vereinfacht)

class My Class extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isDesktop: "1450px" //This is where I am having problems 
     }; 
    } 

    render() { 
     const isDesktop = this.state.isDesktop; 

     return (
      <div> 
       {isDesktop ? (
        <div>I show on 1451px or higher</div> 
       ) : (
        <div>I show on 1450px or lower</div> 
       )} 
      </div> 
     ); 
    } 
} 

Vielleicht mit ComponentWillMount oder ComponentDidMount Ich bin suppposed es zu arbeiten. Ehrlich gesagt, nicht sicher. Ich bin neu mit React.

Vielen Dank im Voraus Jungs.

Answer 1

Vielleicht bin ich suppposed es an die Arbeit mit ComponentWillMount oder ComponentDidMount

Ja, Sie brauchen für resize Ereignis zu hören und internen Zustand auf Änderung aktualisieren. Sie können dies tun, indem Sie beim Mounten der Komponente den Ereignishandler hinzufügen. Versuchen Sie das vollständige Beispiel here.

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isDesktop: false //This is where I am having problems 
    }; 

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

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

    updatePredicate() { 
    this.setState({ isDesktop: window.innerWidth > 1450 }); 
    } 

    render() { 
    const isDesktop = this.state.isDesktop; 

    return (
     <div> 
     {isDesktop ? (
      <div>I show on 1451px or higher</div> 
     ) : (
      <div>I show on 1450px or lower</div> 
     )} 
     </div> 
    ); 
    } 
} 

Answer 2

class My Class extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isDesktop: window.innerHeight > 1450, 
     }; 
    } 

    render() { 
     const isDesktop = this.state.isDesktop; 

     return (
      <div> 
       {isDesktop ? (
        <div>I show on 1451px or higher</div> 
      ) : (
        <div>I show on 1450px or lower</div> 
      )} 
      </div> 
    ); 
    }} 

Hier weitere Informationen Get viewport/window height in ReactJS