高阶组件（HOC）和窗口调整大小的侦听器

Question

我具有以下HOC，我曾考虑过创建3个状态，这些状态将成为我的断点

• 手机
• 平板电脑
• 桌面

但是我想知道当达到断点时如何将这些状态设置为true：

• 手机：小于767
• 平板电脑：768至991之间
• 桌面：992年至1919年之间
• 大屏幕：1919和2520

然后当这些断点之一到达时，状态将变为true

还有，我现在该如何在HOC中仅传递一个状态（以正确为准？）>

我可以改善这种逻辑吗？

import React from "react";

const withWindowResize = Component => {
  class WrappedComponent extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        height: 0,
        width: 0,
        mobile: false,
        desktop: false,
        tablet: false
      };
      window.addEventListener("resize", this.resizeUpdate);
    }

    componentDidMount() {
      this.update();
    }

    resizeUpdate = () => {
      this.setState({
        height: window.innerHeight,
        width: window.innerWidth
      });
    };

    render() {
      return <Component />;
    }
  }
  return WrappedComponent;
};

export default withWindowResize;

我有以下HOC，我曾考虑创建3个状态，这些状态将是我的移动平板电脑的断点，但我想知道当断点为...时如何将这些状态设置为true。]

Answer 1

有很多方法可以执行此操作，但是按照您的方法，您可以执行以下操作，其中根据上面提供的规范，状态更改为size变量。

以这种方式，您只需要将this.state.size传递给您的组件。