React Helmet 动态类相互覆盖

Question

我正在尝试在 body 标签上有条件地设置 class。这本身是微不足道的，不是问题，但是当有多个组件时，有条件地同时写入 body 标签的 class 属性，它们开始相互覆盖。其中只有一个保持活跃，而其他人则被忽略。示例：

// Sidebar.js

const Sidebar = () => (
  // ...
  <Helmet>
    <body className={menuOpen ? 'blur' : ''} />
  </Helmet>
  // ...
);

// Loader.js

const Loader = () => (
  // ...
  <Helmet>
    <body className={isLoading ? 'hidden' : ''} />
  </Helmet>
  // ...
);

在此示例中，侧边栏必须通过在 body 标签上设置 class 来禁用滚动（并模糊页面，出于设计目的），当处于活动状态时。加载器需要在它处于活动状态时禁用滚动（它是一个全屏预加载器）。这里侧边栏组件优先，Loader组件中的Helmet标签直接忽略

我怎样才能使这个工作？

编辑：当然，我可以手动使用 DOM API 和 set/remove classes，这就是我目前正在做的，但想知道是否有更多的反应方式来做到这一点。

Answer 1

在 class 属性中维护您想要的项目数组，然后使用 helmet 应用该数组

React Helmet dynamic classes override each other