在ReactJS中获取视口/窗口高度 [英] Get viewport/window height in ReactJS

问题描述

如何获得视口的高度???

How to get viewport's height???

window.innerHeight()

但是使用reactjs，我不知道如何获取这些信息。我的理解是

But using reactjs, I'm not sure how to get this information. My understanding is that

ReactDOM.findDomNode()

仅适用于创建的组件。但是文档或 body 元素不是这种情况，它可以给我窗口的高度。

only works for components created. However this is not the case for the document or body element, which could give me height of the window.

推荐答案

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...
  }
}

设置道具

Set the props

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

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

视口高度现在可用作{this.state.height} in渲染模板

viewport height is now available as {this.state.height} in rendering template

这篇关于在ReactJS中获取视口/窗口高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！