针对改变浏览器宽度,浏览器底部出现滚动条时的情况,解决方案是设置事件监听,根据浏览器的可视区域高度实时更新页面的高度。
步骤1:在state中初始化页面高度为window.document.body.clientHeight(注:这里的clientHeight是去除页面底部滚动条高度的浏览器可视区域高度,应与window.innerHeight区分开)
state = {height: window.document.body.clientHeight}
步骤2:写一个方法用来更新height
reloadHeight = () => {
this.setState({height: window.document.body.clientHeight})
};
步骤3:在componentDidMount事件中添加一个设置高度的事件监听
componentDidMount() {
window.addEventListener('resize', this.reloadHeight);
}
步骤4:在组件即将销毁时移除这个监听事件
componentWillUnmount() {
window.removeEventListener('resize', this.reloadHeight)
}
步骤5:在需要设置高度的标签上引用this.state.height就可以了