检查屏幕尺寸更改的特定宽度

Question

我有一个解决方案，可以检查屏幕的当前宽度，并根据结果加载普通的桌面菜单或汉堡菜单。但是，如果用户减小（或为此增加）当前窗口，它将不会为该新大小重新加载正确的菜单，而不会强迫用户更新窗口。我的代码如下所示：let width = window.innerWidth;if (window.matchMedia("(orientation: landscape)").matches && width < 1025) {  return (    <MegaMenuContainer provider={provider} /> // hamburger  );}else if (width > 1025) {  return (    <MegaMenuContainerDesktop provider={provider} />  );}else {  return (    <MegaMenuContainer provider={provider} />  //Hamburger  );}因此，如果当前大小为1025，则应加载桌面菜单。并且当用户将其大小调整为1025以下时，它应该触发汉堡包版本（可能带有this.forceUpdate（））。我可能需要一个事件侦听器，以检查屏幕是否已调整大小并检查初始宽度，如果它的爱人者或高于1025，则比较它，并加载正确的菜单。怎么做？

Answer 1

您的组件可以是这样的：

class WindowDimensions extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      innerWidth = window.innerWidth

    }

  }

  handleResize = () => {

      this.setState({innerWidth: window.innerWidth);

  }

  componentDidMount() {

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

  }

  componentWillUnmount() {

      window.removeEventListener("resize", this.handleResize);

  }

  render() {

    const innerWidth = {state};

    if (window.matchMedia("(orientation: landscape)").matches && innerWidth < 1025) {

      return (

        <MegaMenuContainer provider={provider} /> // hamburger

      );

    }

    else if (innerWidth > 1025) {

      return (

        <MegaMenuContainerDesktop provider={provider} />

      );

    }

    return (

      <MegaMenuContainer provider={provider} />  //Hamburger

    );

  }

};

不要忘了取消调整大小监听器的订阅。

Answer 2

您需要一个事件侦听器来监视窗口中的更改，特别是您要侦听该resize事件。

const handleResize = () => {

  // put your logic here

  console.log(window.innerWidth)

}

window.addEventListener('resize', handleResize)

调整大小时，这将输出窗口的内部宽度。