在ReactJS中获取视口/窗口高度

  • Z时代
  • 2024-01-10
  • 分类：问答

如何在ReactJS中获得视口高度？在普通的JavaScript中，我使用

window.innerHeight()

但是使用ReactJS，我不确定如何获取此信息。我的理解是

ReactDOM.findDomNode()

仅适用于创建的组件。但是，对于documentor body元素而言并非如此，这可能会给我窗口的高度。

回答：

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

以上是 在ReactJS中获取视口/窗口高度 的全部内容， 来源链接： utcz.com/qa/434817.html

回到顶部