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

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

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