Question

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

Answer 1

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

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

resize() {
    this.setState({hideNav: window.innerWidth <= 760});
}

编辑：为了保存状态更新，我更改了＆＃34;调整大小＆＃34;一点，只是在需要时更新。

resize() {
    let currentHideNav = (window.innerWidth <= 760);
    if (currentHideNav !== this.state.hideNav) {
        this.setState({hideNav: hideNcurrentHideNav});
    }
}

Answer 2

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

Answer 3

在React（16.8.0+）中使用钩子

lst = [1,1,1,1,1,1,1,1,1]
len_lst = len(list(set(lst)))

print(len_lst)

1


lst = [1,2,1,1,1,1,1,1,1]
len_lst = len(list(set(lst)))
print(len_lst)

2

Answer 4

嘿，我刚刚为这个问题发布了一个npm包。查看https://www.npmjs.com/package/react-getscreen

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

Answer 5

这与this answer相同，但是将函数附加到eventListner之后，还要在 componentWillUnmount

上将其删除

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

Answer 6

有多种方法可以将第一种方法存档，即使用此类使用CSS

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

此标记内的所有类仅在屏幕等于或小于576px时可见

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

类似的东西

 constructor(props)
    {
        super(props);

        this.state = {
            isToggle: null
        }

        this.resizeScreen = this.resizeScreen.bind(this); 
    }
    
    
     componentDidMount() {

        window.addEventListener("resize", this.resizeScreen());

    }
    
    
    resizeScreen() {
        if(window.innerWidth === 576)
        {
            this.setState({isToggle:'I was resized'});
        }
        
    }

即使使用事件侦听器，我仍然更喜欢CSS方式，因为我们可以使用多种屏幕尺寸而无需进一步的js编码。

我希望这会有所帮助！

Answer 7

react-screentype-hook 库允许您开箱即用。 https://www.npmjs.com/package/react-screentype-hook

您可以使用它提供的默认断点，如下所示

const screenType = useScreenType();

screenType 具有以下形状

  {
    isLargeDesktop: Boolean,
    isDesktop: Boolean,
    isMobile: Boolean,
    isTablet: Boolean
  }

或者你甚至可以像这样配置你的自定义断点

const screenType = useScreenType({
    mobile: 400,
    tablet: 800,
    desktop: 1000,
    largeDesktop: 1600
  });

Answer 8

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'));

如何在React中检测屏幕大小是否已更改为移动设备？

8 个答案: