Реагировать на условный рендеринг в зависимости от размера области просмотра

Возможно, мне предложат работать с ComponentWillMount или ComponentDidMount

Да, вам нужно отслеживать событие resize и обновлять внутреннее состояние при изменении. Вы можете сделать это, добавив обработчик событий при монтировании компонента. Попробуйте полный пример здесь.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDesktop: false //This is where I am having problems
    };

    this.updatePredicate = this.updatePredicate.bind(this);
  }
  componentDidMount() {
    this.updatePredicate();
    window.addEventListener("resize", this.updatePredicate);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updatePredicate);
  }

  updatePredicate() {
    this.setState({ isDesktop: window.innerWidth > 1450 });
  }

  render() {
    const isDesktop = this.state.isDesktop;

    return (
      <div>
        {isDesktop ? (
          <div>I show on 1451px or higher</div>
        ) : (
          <div>I show on 1450px or lower</div>
        )}
      </div>
    );
  }
}

Просто для того, чтобы опубликовать здесь недавнее обновление после того, как у меня возникла такая же проблема, но настроил его с помощью функционального компонента и useEffect / useState React Hooks:

const MyFunction = () => {
  const [isDesktop, setDesktop] = useState(window.innerWidth > 1450);

  const updateMedia = () => {
    setDesktop(window.innerWidth > 1450);
  };

  useEffect(() => {
    window.addEventListener("resize", updateMedia);
    return () => window.removeEventListener("resize", updateMedia);
  });

  return (
    <div>
      {isDesktop ? (
        <div>I show on 1451px or higher</div>
      ) : (
        <div>I show on 1450px or lower</div>
      )}
    </div>
  );
}

проблема с вашим кодом заключается в том, что он работает только в том случае, если происходит изменение размера, здесь у меня есть функция handleWindowResiz, которая установит ширину на window.innerWidth и сравнивает ее с breakPoint для условного рендеринга вашего пользовательского интерфейса, если пользователь изменяет размер экрана, прослушиватель событий будет будет запущен, и будет вызван handleWindowResiz, и он сбросит width на новый window.innerWidth, и вы получите желаемый пользовательский интерфейс. Таким образом, пользовательский интерфейс всегда отображается правильно при первом отрисовке компонента и при изменении пользователем ширины экрана.

const MyFunction = () => {

  const [width, setWidth] = React.useState(window.innerWidth);
  const breakPoint = 1450;

 

  useEffect(() => {
   const handleWindowResize = () => setWidth(window.innerWidth);
   window.addEventListener("resize", handleWindowResize);

    
   return () => window.removeEventListener("resize", handleWindowResize);
  },[]);

  return (
    <div>
      {width > breakPoint? (
        <div>I show on 1451px or higher</div>
      ) : (
        <div>I show on 1450px or lower</div>
      )}
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

class My Class extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          isDesktop: window.innerHeight > 1450,
      };
  }

  render() {
      const isDesktop = this.state.isDesktop;

      return (
          <div>
              {isDesktop ? (
                  <div>I show on 1451px or higher</div>
              ) : (
                  <div>I show on 1450px or lower</div>
              )}
          </div>
      );
  }}

Дополнительная информация: Получить высоту окна просмотра / окна в ReactJS

если вы используете NextJS ... вы получите сообщение об ошибке: окно не определено. Вот код без ошибок, наслаждайтесь.

Сначала я проверяю, если размер окна больше или меньше 1450 пикселей (потому что, если пользователь никогда не изменяет размер окна, весь код будет бесполезен)

Но мне также нужно проверить, изменяет ли пользователь размер окна ... посмотрите сами

    export default function MyFunction() {
        const [isDesktop, setDesktop] = useState(false);

  useEffect(() => {
    if (window.innerWidth > 1450) {
      setDesktop(true);
    } else {
      setDesktop(false);
    }

    const updateMedia = () => {
      if (window.innerWidth > 1450) {
        setDesktop(true);
      } else {
        setDesktop(false);
      }
    };
    window.addEventListener('resize', updateMedia);
    return () => window.removeEventListener('resize', updateMedia);
  }, []);
    
      return (
          <div>
              {isDesktop ? (
                  <div>I show on 1451px or higher</div>
              ) : (
                  <div>I show on 1450px or lower</div>
              )}
          </div>
      );
    }