Компонент высшего порядка (HO C) и слушатель изменения размера окна

Question

У меня есть следующий HO C, и я подумал о создании 3 состояний, где бы это были мои точки останова

• mobile
• tablet
• desktop

Но мне интересно, как я могу установить для этих состояний значение true, когда достигается точка останова, например:

• мобильный: менее 767
• планшет: между 768 и 991
• рабочий стол: между 992 и 1919
• большие экраны: 1919 и 2520

, а затем, когда была достигнута одна из этих точек останова, состояние изменится на true

Кроме того, как я могу сделать, чтобы передать только одно состояние (в зависимости от того, что истина) на данный момент в моем HO C?

Могу ли я улучшить эту логику c?

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
  });
}