React Flow возможно null значение с document.body.classList.add

Question

У меня есть компонент реакции, в котором я изменяю класс тела html. Класс добавляется в componentDidMount и удаляется в компонентеWillUnmount. Я использую Flow для проверки типов. Когда я бегу Flow я получаю следующее сообщение об ошибке:

src/modules/homepage/HomePage.js:27 
27:   document.body.classList.remove('homepage') 
          ^^^^^^^^^ property `classList`. Property cannot be accessed on possibly null value 
27:   document.body.classList.remove('homepage') 
      ^^^^^^^^^^^^^ null 

Может кто-нибудь подскажет, как подавить эту ошибку или что бы рекомендуемый подход?

Спасибо

Answer 1

Эта ошибка является именно тем, что это звучит. Свойство classList невозможно получить по возможному нулевому значению. (document.body)

document.body не определен до document.readyState is interactive. Аналогичным образом вы можете ожидать события domcontentready или load, но вы, вероятно, уже это делаете, так как вы создаете компоненты React.

На практике поток здесь раздражает, потому что в среде браузера один раз document.body определен, он остается определенным.

Вот несколько простых решений:

Вы можете использовать функцию invariant: инвариант (document.body); // вывести ошибку, если document.body еще не существует document.body.classList.remove ('homepage');

Или положить заявление в если блок:

if (document.body) { 
    document.body.classList.remove('homepage') 
}