如何在React中检测屏幕尺寸是否已更改为移动屏幕？

小编典典

如何在React中检测屏幕尺寸是否已更改为移动屏幕？

reactjs

我正在使用React开发一个Web应用程序，需要检测屏幕尺寸何时进入移动断点以更改状态。具体来说，当用户进入移动模式时，我需要折叠我的sidenav，并使用存储在组件内状态的布尔值对其进行控制。

阅读 545

2020-07-22

共1个答案

小编典典

我所做的是在组件安装后添加事件侦听器：

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”将在屏幕调整大小时更新，并将重新呈现组件。好多了！

2020-07-22