如何在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

回到顶部