反应：仅将主体类添加到useEffect挂钩中的某些组件？

Question

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

我在需要向其中添加body类的路线中加载了一个组件。当用户离开此页面时，我需要删除该类。我正在使用

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

这可以将类正确添加到body标签。除了我导航到另一页时，该类仍然存在。如果我重新加载第二页，它就消失了。

当路线更改时组件卸载时，如何删除该类？

Answer 1

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

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

请参见docs。

Answer 2

如果您的效果返回一个函数，它将作为清理操作。

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

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

您可以在文档中查看Effects with cleanup