Получить viewport / высота окна в ReactJS

Как получить высоту viewport???

window.innerHeight()

но используя reactjs, я не уверен, как получить эту информацию. Насколько я понимаю, это

ReactDOM.findDomNode()

работает только для созданных компонентов. Однако это не относится к документ или тело элемент, который может дать мне высоту окна.

58
javascript reactjs

4 ответов

этот ответ похож на Jabran Saeed, за исключением того, что он также обрабатывает изменение размера окна. Я получил его от!--2-->здесь.

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 });
}
139
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...
  }
}

установить реквизит

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

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

высота окна просмотра теперь доступна как {this.государство.высота} в шаблоне рендеринга

29

это то же самое в React, вы можете использовать window.innerHeight чтобы получить высоту текущего окна просмотра.

Как видите,здесь

4

вы также можете попробовать это:

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