小编典典

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

reactjs

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


阅读 546

收藏
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