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

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

0 голосов
/ 24 мая 2018

У меня есть компонент, в котором я хочу отображать различные компоненты в зависимости от размера экрана.Если я перезагружаю страницу в мобильном режиме, все в порядке, 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>
    )

1 Ответ

0 голосов
/ 24 мая 2018

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

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

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

...