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

Posted 2023-02-22

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

【英文标题】：React: add body class only to certain components in useEffect hook?

【发布时间】：2019-11-17 11:58:39

【问题描述】：

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

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

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

这会正确地将类添加到 body 标记中。除非我导航到另一个页面，否则课程仍然存在。如果我重新加载第二页，它就消失了。

当路由改变时组件卸载时如何移除类？

【参考方案1】：

如果您的效果返回一个函数，它将充当清理。

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

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

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

【参考方案2】：

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

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

请参阅docs。

【讨论】：

这很好用。它留下了一个空的类属性（这不是问题，但我想知道如何删除）。可以这样做来添加和删除已经在 body 标签上的其他类吗？

@Steve 我想你的意思是你想省略 only signin 保留任何现有的类吗？ document.body.className = document.body.className.replace('signin', '')

@Steve，您可能更喜欢使用classList，也可能不喜欢使用classList，无论哪种方式，您都会得到相同的结果，但API 可能更简洁。