Реакция: добавить класс тела только к определенным компонентам в ловушке useEffect?

Question

Я использую React 16.8.6 и хуки. Я новичок в крючках.

У меня есть компонент, загруженный в маршрут, к которому мне нужно добавить класс тела. Когда пользователь покидает эту страницу, мне нужно удалить класс. Я использую

  useEffect(() => {
    document.body.className = 'signin';
  }, []);

Это правильно добавляет класс к тегу body. За исключением случаев, когда я перехожу на другую страницу, класс остается. Если я перезагрузлю вторую страницу, она исчезнет.

Как удалить класс, когда компонент отключается при изменении маршрута?

Answer 1

Если ваш эффект возвращает функцию, она будет действовать как очистка.

useEffect(() => {
  document.body.classList.add('signin');

  return function cleanup() {
    document.body.classList.remove('signin');
  };
}, []);

Вы можете проверить Эффекты с очисткой в документации

Answer 2

Хук useEffect поддерживает функцию очистки, которая запускается при размонтировании компонента

useEffect(() => {
  document.body.className = 'signin';
  return () => { document.body.className = ''; }
});

См. документы .