如何在React中检测屏幕尺寸是否已更改为移动屏幕?
我正在使用React开发一个Web应用程序,需要检测屏幕尺寸何时进入移动断点以更改状态。具体来说,当用户进入移动模式时,我需要折叠我的sidenav,并使用存储在组件内状态的布尔值对其进行控制。
回答:
我所做的是在组件安装后添加事件侦听器:
componentDidMount() { window.addEventListener("resize", this.resize.bind(this));
this.resize();
}
resize() {
this.setState({hideNav: window.innerWidth <= 760});
}
componentWillUnmount() {
window.removeEventListener("resize", this.resize.bind(this));
}
编辑:为了保存状态更新,我稍微更改了“调整大小”,仅在窗口宽度发生变化时才进行更新。
resize() { let currentHideNav = (window.innerWidth <= 760);
if (currentHideNav !== this.state.hideNav) {
this.setState({hideNav: currentHideNav});
}
}
更新:是时候使用钩子了!如果您的组件正常运行,并且您使用了钩子-那么您可以使用react-response包中的useMediaQuery钩子。
从“响应式”导入{useMediaQuery};
…
const isMobile = useMediaQuery({query:(max-width: 760px)
});
使用此挂钩后,“ isMobile”将在屏幕调整大小时更新,并将重新呈现组件。好多了!
以上是 如何在React中检测屏幕尺寸是否已更改为移动屏幕? 的全部内容, 来源链接: utcz.com/qa/415283.html