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

Question

我正在使用 React 开发一个 Web 应用程序，需要检测屏幕尺寸何时进入移动断点以便更改状态。

具体来说，当用户进入移动模式时，我需要折叠我的侧导航，并且这是通过存储在组件内的状态中的 bool 值来控制的。

Answer 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});
    }
}

更新:是时候使用钩子(Hook)了!如果您的组件功能正常，并且使用钩子(Hook) - 那么您可以使用 react-responsive 包中的 useMediaQuery 钩子(Hook)。

import { useMediaQuery } from 'react-responsive';

...

const isMobile = useMediaQuery({ query: `(max-width: 760px)` });

使用此钩子(Hook)后，“isMobile”将在屏幕大小调整时更新，并重新渲染组件。好多了!