GatsbyJS: заменить часть серверной части рендеринга HTML - PullRequest
Новая
       35

GatsbyJS: заменить часть серверной части рендеринга HTML

0 голосов
/ 25 сентября 2018

У меня есть компонент обратного отсчета в моем приложении React, когда обратный отсчет еще не достиг даты назначения, <html> должен иметь класс is-counting, в противном случае он должен иметь класс is-complete.

Реализация выглядит примерно так: (использует пакет react-helmet) 

<Countdown toDate={new Date(2019, 5, 14)}>
  {props =>
    props.isComplete ? (
      <Helmet htmlAttributes={{ class: 'is-complete' }} />
    ) : (
      <Helmet htmlAttributes={{ class: 'is-counting' }} />
    )
  }
</Countdown>;

Так что, когда я запускаю gatsby build на стороне сервера, рендеринг html имеет класс is-counting следующим образом: 

<html class="is-counting">…</html>

Мой вопрос: каков наилучший способ удалить класс, применяемый к тегу <html>?Мне нужно, чтобы класс не применялся, иначе мои переходы при загрузке страницы не будут работать, их следует применять только тогда, когда javascript начнет работать.

Я думаю, что ответ лежит в этой части документации: SSR APIs |GatsbyJS но я не уверен, как именно действовать.

Заранее спасибо.

1 Ответ

0 голосов
/ 25 сентября 2018

Итак, следуя предложению @ xadm , я заработал, я добавил isClient в состоянии обратного отсчета, которое изначально установлено на false, затем в componentDidMount я установил на true(этот метод жизненного цикла не вызывается при выполнении ssr), поэтому теперь я просто передаю его в качестве реквизита и условно отрисовываю компонент: 

<Countdown toDate={new Date(2019, 5, 14)}>
  {props =>
    props.isComplete ? (
      {props.isClient && (
        <Helmet htmlAttributes={{ class: 'is-complete' }} />
      )}
    ) : (
      {props.isClient && (
        <Helmet htmlAttributes={{ class: 'is-counting' }} />
      )}
    )
  }
</Countdown>

Таким образом, класс применяется только на стороне клиента и мой переход на страницуload работает отлично.

EDIT : После недолгого размышления я добавил состояние isClient к корневому компоненту, поскольку:

  1. Это имеет больше смысла дляиметь его вместо самого обратного отсчета
  2. При необходимости он может быть легко использован другими частями приложения
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...