如何在ReactJS中获取视口高度?在普通JavaScript中,我使用

window.innerHeight()

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

ReactDOM.findDomNode()

仅适用于创建的组件.然而,这不是documentbody元素的情况,它可以给我窗口的高度.

推荐答案

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

设置props

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

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

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

Javascript相关问答推荐

添加/删除时React图像上传重新渲染上传的图像

在JavaScript中对大型级联数组进行切片的最有效方法?

获取加载失败:获取[.]添加时try 将文档添加到Firerestore,Nuxt 3

如何通过在提交时工作的函数显示dom元素?

如何为GrapesJS模板编辑器创建自定义撤销/重复按钮?

使用JavaScript在ionic Web应用程序中更新.pane和.view的背景 colored颜色

使用useup时,React-Redux无法找到Redux上下文值

配置WebAssembly/Emscripten本地生成问题

从Node JS将对象数组中的数据插入Postgres表

在Three JS中看不到补间不透明度更改效果

更改agGRID/Reaction中的单元格格式

FireBase FiRestore安全规则-嵌套对象的MapDiff

Reaction useState和useLoaderData的组合使用引发无限循环错误

P5play SecurityError:无法从';窗口';读取命名属性';Add';:阻止具有源的帧访问跨源帧

为什么这个最小Angular 的Licial.dev设置不起作用?

使用Library chart.js在一个带有两个y轴的图表中绘制两个数据集

输入数据覆盖JSON文件

JSX/React -如何在组件props 中循环遍历数组

相对于具有选定类的不同SVG组放置自定义工具提示

如何在单击Search按钮时更新Reaction组件?