我正在使用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)});
(max-width: 760px)
使用此挂钩后,“ isMobile”将在屏幕调整大小时更新,并将重新呈现组件。好多了!