React：仅将 body class 添加到 useEffect 挂钩中的某些组件？

Question

我正在使用 React 16.8.6 和挂钩。我是新手。

我在路由中加载了一个组件，我需要向其中添加主体 class。当用户离开此页面时，我需要删除 class 。我正在使用

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

这正确地将 class 添加到正文标签中。除了当我导航到另一个页面时， class 仍然存在。如果我 重新加载 第二页它就不见了。

如何在路由更改时卸载组件时删除class？

Answer 1

useEffect 挂钩支持在组件卸载时运行的清理功能

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

参见docs。

Answer 2

如果你的效果 returns 是一个函数，它将作为清理。

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

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

您可以查看文档Effects with cleanup

React: add body class only to certain components in useEffect hook?