高阶组件 (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;

Answer 1

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

这样，您只需将this.state.size 传递给您的组件。

import React from "react";

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

      this.state = {
        size: this.findSize()
      };
    }

    componentDidMount() {
      window.addEventListener("resize", this.resizeUpdate.bind(this)); // initialize your listener
    }

    componentWillUnmount() { // remove event listener on component unmount
      window.removeEventListener("resize", this.resizeUpdate.bind(this));
    }

    findSize() {
      return window.innerWidth > 1919
          ? "large"
          : window.innerWidth > 992
          ? "desktop"
          : window.innerWidth > 768
          ? "tablet"
          : "mobile"; // find currentSize
    }

    resizeUpdate() {
      const currentSize = this.findSize();

      this.setState({
        size: currentSize
      });
    }

    render() {
      return <Component size={this.state.size} />;
    }
  }

  return WrappedComponent;
};

export default withWindowResize;

请注意，我正在使用React.PureComponent，因为我们不想更改我们的状态并在每次调整窗口大小时重新渲染我们的Component。

这与使用 React.Component 并在使用 this.setState 之前检查相同，如果我们的 currentSize 与我们的状态不同，在更新之前。

if (currentSize !== this.state.size) {
  this.setState({
    size: currentSize
  });
}