скрытый компонент в Material-UI, как предотвратить рендеринг? - PullRequest
Новая
       27

скрытый компонент в Material-UI, как предотвратить рендеринг?

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

До сих пор я с большим успехом использовал nextJS и material-ui.
Однако в последнее время я сталкиваюсь с концептуальной проблемой:
Всякий раз, когда приложение отображается на сервере, я не хочу егодля перекомпоновки, как только он прибудет на клиент.
Поскольку я по-разному отображаю макет между настольным компьютером и мобильным устройством, я разделяю компоненты с помощью компонента <Hidden implementation='css'/>.Я использую implementation=css, потому что я не могу полагаться на ширину окна, поскольку она не будет доступна на сервере.
Моя главная проблема сегодня заключается в том, что и настольная, и мобильная версия отображаются, даже еслиправильный выводится на экран, это приводит к ненужному выполнению логики (особенно вызовы API).
Я думаю, что сделал что-то не так, но не знаю, как это исправить.
"Идеальным" способом было бытакой компонент, как <Hidden/>, но вместо того, чтобы просто скрыть уже отрендеренный компонент, он просто не будет его отображать вообще ... и я не могу использовать window.innerWidth, конечно, так как мне небезразличен SSR ...

Если у кого-то есть идея, я был бы признателен.

1 Ответ

0 голосов
/ 10 июня 2018

итак, я наконец нашел не идеальное, но оптимальное решение для моего случая:
когда рендеринг выполняется на стороне сервера, я использую материал-ui <Hidden implementation='css'/> (то же самое можно добиться с помощью носителя-query реагировать на компонент), чтобы компонент отображал как настольную, так и мобильную версию, а затем сразу скрывал правую (без мерцания на экране).
Затем, когда рендеринг выполняется на стороне клиента, я вычисляю window.innerWidth, чтобы компонент не пересчитывал мобильную версию и версию для ПК для каждого изменения состояния.
Вот мой код: 

<Fragment>
  <Display format="mobile" css>
    {process.browser
      ? this.state.width < 960 ? mobile() : null
      : mobile()}
  </Display>
  <Display format="tablet-desktop" css>
    {process.browser
      ? this.state.width >= 960 ? tablet_desktop() : null
      : tablet_desktop()}
  </Display>
</Fragment>
...