Obtenez la fenêtre d'affichage/hauteur de la fenêtre en ReactJS

Question

Comment obtenir la fenêtre d'affichage de la hauteur???

window.innerHeight()

Mais à l'aide de reactjs, je ne suis pas sûr de savoir comment obtenir cette information. Ma compréhension est que

ReactDOM.findDomNode()

ne fonctionne que pour les composants créés. Cependant, ce n'est pas le cas pour le document ou le corps de l'élément, qui pourrait me donner la hauteur de la fenêtre.

Answer 1

C'est la même chose à Réagir, vous pouvez utiliser window.innerHeight pour obtenir la fenêtre d'affichage en cours de la hauteur.

Comme vous pouvez le voir ici

Answer 2

Cette réponse est similaire à Jabran Saeed, sauf qu'il les poignées de redimensionnement de la fenêtre. Je l'ai eu à partir d' ici.

constructor(props) {
  super(props);
  this.state = { width: 0, height: 0 };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

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

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

updateWindowDimensions() {
  this.setState({ width: window.innerWidth, height: window.innerHeight });
}

Answer 3

class AppComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {height: props.height};
  }

  componentWillMount(){
    this.setState({height: window.innerHeight + 'px'});
  }

  render() {
    // render your component...
  }
}

Définissez les accessoires

AppComponent.propTypes = {
 height:React.PropTypes.string
};

AppComponent.defaultProps = {
 height:'500px'
};

fenêtre d'affichage de la hauteur est maintenant disponible en tant que {cela.état.hauteur} dans le rendu du modèle

Answer 4

J'ai juste passé un peu de sérieux de temps à essayer de comprendre certaines choses à Réagir et les événements de défilement / positions - donc, pour ceux qui cherchent encore, voici ce que j'ai trouvé:

La fenêtre d'affichage de la hauteur peut être trouvé en utilisant la fenêtre.innerHeight ou à l'aide de document.documentElement.clientHeight. (Fenêtre d'affichage en cours de la hauteur)

La hauteur de l'intégralité du document (corps) peut être trouvé à l'aide de la fenêtre.document.corps.offsetHeight.

Si vous êtes essayant de trouver la hauteur du document et de savoir quand vous avez touché le fond, voici ce que j'ai trouvé:

if (window.pageYOffset >= this.myRefII.current.clientHeight && Math.round((document.documentElement.scrollTop + window.innerHeight)) < document.documentElement.scrollHeight - 72) {
        this.setState({
            trueOrNot: true
        });
      } else {
        this.setState({
            trueOrNot: false
        });
      }
    }

(Ma barre de navigation a été 72px en position fixe, donc la -72 pour obtenir un meilleur défilement de l'événement de déclenchement)

Enfin, voici un certain nombre de faire défiler les commandes de la console.log(), qui m'a aidé à comprendre mes calculs activement.

console.log('window inner height: ', window.innerHeight);

console.log('document Element client hieght: ', document.documentElement.clientHeight);

console.log('document Element scroll hieght: ', document.documentElement.scrollHeight);

console.log('document Element offset height: ', document.documentElement.offsetHeight);

console.log('document element scrolltop: ', document.documentElement.scrollTop);

console.log('window page Y Offset: ', window.pageYOffset);

console.log('window document body offsetheight: ', window.document.body.offsetHeight);

Ouf! Espérons que cela aide quelqu'un!

Answer 5

Vous pouvez aussi essayer ceci:

constructor(props) {
        super(props);
        this.state = {height: props.height, width:props.width};
      }

componentWillMount(){
          console.log("WINDOW : ",window);
          this.setState({height: window.innerHeight + 'px',width:window.innerWidth+'px'});
      }

render() {
        console.log("VIEW : ",this.state);
}