Компонент Semantic-UI-React Responsive отображает элемент, несмотря на значения minWidth/maxWidth

Question

У меня есть компонент, где я хочу визуализировать различные компоненты в зависимости от размера экрана. Если я перезагружаю страницу в мобильном режиме, все в порядке, NavBarMobile отображается, а NavbarDesktop - нет.

Если я перезагружаю страницу в режиме рабочего стола, то мой NavbarMobile отображается снова, а не NavBarDesktop.

Если я начну изменять размер экрана на мобильный и вернуться к представлению на рабочем столе, NavBarDesktop отображается правильно.

Итак, проблема заключается в загрузке первой страницы в режиме рабочего стола, как это исправить?

 const { mainAppComponents, } = this.props
    const { visible, } = this.state
    return (
      <Fragment>
        <Responsive maxWidth={767}>
          <NavBarMobile
            onPusherClick={this.handlePusher}
            onToggle={this.handleToggle}
            rightItems={rightItems}
            visible={visible}
          >
            {mainAppComponents.header}
            {mainAppComponents.routes}
          </NavBarMobile>
        </Responsive>

        <Responsive minWidth={768}>
          <NavBarDesktop rightItems={rightItems}>{mainAppComponents.header}</NavBarDesktop>
          {mainAppComponents.routes}
        </Responsive>
      </Fragment>
    )

Answer 1

Игорь-Вук, я собрал пример быстрого кода и ящика, чтобы убедиться, что не было проблем с тем, как вы пытаетесь реализовать реквизиты минимальной / максимальной ширины. Как вы можете видеть из этого примера, они на самом деле работают, как и ожидалось. https://codesandbox.io/s/98pk46l7vr

Не видя остальной части вашего компонента или приложения, проблема может быть связана с чем-то в вашем маршрутизаторе. Я бы порекомендовал попытаться удалить некоторые другие компоненты, которые вы возвращаете как дочерние элементы Responsive компонент, чтобы увидеть, если он начинает работать, как ожидалось (как в моем примере кодов и коробки). Если это работает, то вы знаете, что проблема где-то в детях. Если это не работает, значит, в вашем приложении есть большая проблема.

Если вы используете SSR, при первоначальной загрузке контент был обработан и обработан с Responsive компонент, не имеющий сведений о области просмотра. Поэтому вам может понадобиться добавить медиа-запрос CSS.