Материал интерфейса. Показать разные компоненты в зависимости от точек останова (SSR) - PullRequest
Новая
       4

Материал интерфейса. Показать разные компоненты в зависимости от точек останова (SSR)

2 голосов
/ 18 марта 2019

На небольших устройствах (телефонах) я хочу показать <Foo/> компонент, а на больших (настольных компьютерах) <Bar/>, вот так 

function MyComp (props) {
   if (isMobile) 
        return <Foo/>
   else 
        return <Bar/>
    }
}

Я мог найти только 2 возможных способа реализовать это в интерфейсе материалов:

  • Использование Hidden компонента
  • Использование withWidth HOC

Вариант с HOC показался мне более правильным в этом случае, но, очевидно, он не работает правильно с SSR (но Hidden работает).

Так что с точки зрения наилучшей практики можно использовать два Hidden элемента? Как это: 

function MyComp (props) {

  return (
    <>
      <Hidden mdUp implementation="css">
        <Foo/>
      </Hiddne>
      <Hidden smDown implementation="css">
        <Bar/>
      </Hidden>
    </>

  )
}

1 Ответ

1 голос
/ 18 марта 2019

Нет проблем с использованием <Hidden /> подобным образом, он просто добавляет <div> с необходимым CSS, чтобы показать или нет ваш компонент.Однако лучшим подходом было бы добавить класс CSS непосредственно к вашим <Foo /> и <Bar /> компонентам, чтобы избежать лишних <div> на вашей странице, например: 

function MyComp (props) {

  return (
    <>
        <Foo className={props.classes.foo} />
        <Bar className={props.classes.bar} />
    </>
  )
}

implementation="css" - этонеобходимо в настройках SSR, потому что реализация JS может «прошить» компонент на странице, а затем удалить его после загрузки JS.Недостатком реализации CSS является то, что элемент хранится в DOM.

PS: withWidth будет устаревшим .

...