时间戳

首页 > 解决方案 > 在安装组件之前响应更改主体类

reactjs - 在安装组件之前响应更改主体类

问题描述

我有一个登录组件，安装时主体必须如下所示。

<body class="login-page">

我正在使用 useEffect 挂钩设置类名，如下所示：

useEffect(
    () => {
        document.body.className = "login-page";
    },
    [],
    () => {
        document.body.className = "";
    }
);

用户成功登录后，他们将被重定向到仪表板组件。在安装仪表板组件之前，必须删除上面设置的 body 类。上面的 useEffect 就是这样做的，但是用户必须先刷新页面才能看到仪表板组件的正确布局。

用户登录后如何最好地删除正文类，以免影响仪表板组件的布局？

标签： reactjsreact-routerreact-componentreact-component-unmount

解决方案

看起来你的useEffect钩子有问题。清理应该从useEffect这样的返回。也许这可以解决您的问题？这应该在组件安装时设置主体的类名，然后在组件卸载时将其删除。

useEffect(() => {
  document.body.className = "login-page";
  
  return () => {
    document.body.className = "";
  }
}, []);

编辑：如果这不能解决您的问题，您应该仔细检查组件是否实际正在卸载。

推荐阅读