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)

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

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

2 个答案: