Reactjs 如何在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));
}

---

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

嘿，我刚刚为这个问题发布了一个npm包。 看看

import React，{Component}来自'React'；
从“react getscreen”导入{withGetScreen}
类测试扩展了组件{
render（）{
如果（this.props.isMobile（））返回Mobile；
如果（this.props.isTablet（））返回平板电脑；
返回桌面；
}
}
使用GetScreen导出默认值（测试）；
//也可以通过提供选项对象来设置自己的断点
const options={mobileimit:500，tabletLimit:800}
使用GetScreen导出默认值（测试、选项）；

这与将函数附加到eventListner后相同，也可以在组件WillUnmount上删除它

constructor() {
  super();
  this.state = { screenWidth: null };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

componentDidMount() {
    window.addEventListener("resize", this.updateWindowDimensions());
}

componentWillUnmount() {
    window.removeEventListener("resize", this.updateWindowDimensions)
}

updateWindowDimensions() {
   this.setState({ screenWidth: window.innerWidth });
}

---

归档有多种方法，第一种方法是使用这个类的CSS

@media screen and (max-width: 576px) {}

此标记中的任何类只有在屏幕等于或小于576px时才可见

第二种方法是使用事件侦听器

像这样的

构造函数（道具）
{
超级（道具）；
此.state={
isToggle:null
}
this.resizeScreen=this.resizeScreen.bind（this）；
}
componentDidMount（）{
window.addEventListener（“resize”，this.resizeScreen（））；
}
调整屏幕大小（）{
如果（window.innerWidth==576）
{
this.setState（{isToggle:'I已调整大小'}）；
}
}

在React（16.8.0+）中使用挂钩参考：

const[isMobile，setIsMobile]=useState（false）
//选择屏幕大小
常量handleResize=（）=>{
如果（窗内宽度<720）{
setIsMobile（真）
}否则{
setIsMobile（假）
}
}
//创建一个事件侦听器
useffect（（）=>{
window.addEventListener（“调整大小”，handleResize）
})
//最后，如果isMobile为True或False，则可以有条件地渲染组件

您将需要对该事件侦听器进行去抖动或调节。你会发现两者的例子。这是一个多么好的解决方案！！！爱情挂钩！！！如果你问我，浏览器应该更容易获得物理屏幕大小，而不仅仅是分辨率，因为像素密度变化太大……根据我的经验，基于屏幕大小进行布局的组件的可重用性较差，因为如果你将它们放在一个2 x 2的网格中，它们将呈现为整个屏幕的大小，而不是屏幕的四分之一。好吧，像这样的插件，应该只用于容器组件之类的东西。在这种情况下，它们很好。如何在func组件中使用它？这是正确的答案，应该这样标记。（正如ivarni对上述答案的评论，它也应该被取消公告或限制。）这是另一个答案的复制粘贴：请使用非自有解决方案的参考

import React, { Component } from 'react';
import {withGetScreen} from 'react-getscreen'

class Test extends Component {
  render() {
    if (this.props.isMobile()) return <div>Mobile</div>;
    if (this.props.isTablet()) return <div>Tablet</div>;
    return <div>Desktop</div>;
  }
}

export default withGetScreen(Test);

//or you may set your own breakpoints by providing an options object

const options = {mobileLimit: 500, tabletLimit: 800}
export default withGetScreen(Test, options);

constructor() {
  super();
  this.state = { screenWidth: null };
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}

componentDidMount() {
    window.addEventListener("resize", this.updateWindowDimensions());
}

componentWillUnmount() {
    window.removeEventListener("resize", this.updateWindowDimensions)
}

updateWindowDimensions() {
   this.setState({ screenWidth: window.innerWidth });
}

@media screen and (max-width: 576px) {}

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

const [isMobile, setIsMobile] = useState(false)
 
//choose the screen size 
const handleResize = () => {
  if (window.innerWidth < 720) {
      setIsMobile(true)
  } else {
      setIsMobile(false)
  }
}

// create an event listener
useEffect(() => {
  window.addEventListener("resize", handleResize)
})

// finally you can render components conditionally if isMobile is True or False 

const theme = useTheme();
const xs = useMediaQuery(theme.breakpoints.only('xs'));
const sm = useMediaQuery(theme.breakpoints.only('sm'));
const md = useMediaQuery(theme.breakpoints.only('md'));
const lg = useMediaQuery(theme.breakpoints.only('lg'));
const xl = useMediaQuery(theme.breakpoints.only('xl'));