web-dev-qa-db-fra.com

Obtenir la hauteur de la fenêtre/fenêtre dans ReactJS

Comment obtenir la hauteur de la fenêtre?

window.innerHeight()

Mais en utilisant reactjs, je ne sais pas 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 corps élément, ce qui pourrait me donner la hauteur de la fenêtre.

javascriptreactjs
72
Jabran Saeed
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éfinir les accessoires

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

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

la hauteur de la fenêtre d'affichage est maintenant disponible sous la forme {this.state.height} dans le modèle de rendu.

38
Jabran Saeed

Cette réponse est similaire à celle de Jabran Saeed, sauf qu'elle gère également le redimensionnement de la fenêtre. Je l'ai eu de 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 });
}
166
speckledcarp

C'est la même chose dans React, vous pouvez utiliser window.innerHeight pour obtenir la hauteur de la fenêtre d'affichage actuelle. 

Comme vous pouvez le voir ici

7
QoP

Je viens de passer beaucoup de temps à comprendre certaines choses avec React et à faire défiler les événements/positions - donc pour ceux qui cherchent encore, voici ce que j'ai trouvé:

La hauteur de la fenêtre de visualisation peut être trouvée à l'aide de window.innerHeight ou de document.documentElement.clientHeight. (Hauteur actuelle de la fenêtre d'affichage)

La hauteur de l'ensemble du document (corps) peut être trouvée à l'aide de window.document.body.offsetHeight.

Si vous essayez de trouver la hauteur du document et de savoir quand vous avez atteint le bas, voici ce que j'ai proposé:

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 était de 72px en position fixe, donc le -72 pour obtenir un meilleur déclencheur d'événement de défilement)

Pour finir, voici un certain nombre de commandes de défilement de console.log (), qui m'ont aidé à comprendre mon calcul 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! J'espère que ça aide quelqu'un!

4
thielr7

Les réponses de @speckledcarp et de @Jamesl sont brillantes. Dans mon cas, cependant, il me fallait un composant dont la hauteur puisse s’étendre sur toute la hauteur de la fenêtre, conditionnellement au moment du rendu .... mais en appelant un HOC dans render() restitue le sous-arbre entier. BAAAD.

De plus, les valeurs ne m'intéressaient pas, mais je voulais simplement un parent div qui occuperait toute la hauteur de l'écran (ou la largeur, ou les deux).

J'ai donc écrit un composant Parent fournissant un div de hauteur complète (et/ou de largeur). Boom.

Un cas d'utilisation:

class MyPage extends React.Component {
  render() {
    const { data, ...rest } = this.props

    return data ? (
      // My app uses templates which misbehave badly if you manually mess around with the container height, so leave the height alone here.
      <div>Yay! render a page with some data. </div>
    ) : (
      <FullArea vertical>
        // You're now in a full height div, so containers will vertically justify properly
        <GridContainer justify="center" alignItems="center" style={{ height: "inherit" }}>
          <GridItem xs={12} sm={6}>
            Page loading!
          </GridItem>
        </GridContainer>
      </FullArea>
    )

Voici le composant:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class FullArea extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: 0,
      height: 0,
    }
    this.getStyles = this.getStyles.bind(this)
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this)
  }

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

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

  getStyles(vertical, horizontal) {
    const styles = {}
    if (vertical) {
      styles.height = `${this.state.height}px`
    }
    if (horizontal) {
      styles.width = `${this.state.width}px`
    }
    return styles
  }

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

  render() {
    const { vertical, horizontal } = this.props
    return (
      <div style={this.getStyles(vertical, horizontal)} >
        {this.props.children}
      </div>
    )
  }
}

FullArea.defaultProps = {
  horizontal: false,
  vertical: false,
}

FullArea.propTypes = {
  horizontal: PropTypes.bool,
  vertical: PropTypes.bool,
}

export default FullArea
1
thclark

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);
}
0
Shubham Verma