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

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 {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; innerWidth = window.innerWidth&nbsp; &nbsp; }&nbsp; }&nbsp; handleResize = () => {&nbsp; &nbsp; &nbsp; this.setState({innerWidth: window.innerWidth);&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; window.addEventListener("resize", this.handleResize);&nbsp; }&nbsp; componentWillUnmount() {&nbsp; &nbsp; &nbsp; window.removeEventListener("resize", this.handleResize);&nbsp; }&nbsp; render() {&nbsp; &nbsp; const innerWidth = {state};&nbsp; &nbsp; if (window.matchMedia("(orientation: landscape)").matches && innerWidth < 1025) {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <MegaMenuContainer provider={provider} /> // hamburger&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp; else if (innerWidth > 1025) {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <MegaMenuContainerDesktop provider={provider} />&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <MegaMenuContainer provider={provider} />&nbsp; //Hamburger&nbsp; &nbsp; );&nbsp; }};不要忘了取消调整大小监听器的订阅。

Answer 2

您需要一个事件侦听器来监视窗口中的更改，特别是您要侦听该resize事件。const handleResize = () => {&nbsp; // put your logic here&nbsp; console.log(window.innerWidth)}window.addEventListener('resize', handleResize)调整大小时，这将输出窗口的内部宽度。