Javascript 动态类相互覆盖_Javascript_Reactjs_React Helmet

Javascript 动态类相互覆盖

javascript reactjs

Javascript 动态类相互覆盖,javascript,reactjs,react-helmet,Javascript,Reactjs,React Helmet,我试图在body标记上有条件地设置一个类。这本身并不重要，也不是一个问题，但是当有多个组件同时有条件地写入body标记的class属性时，它们开始相互重写。其中只有一个保持活动状态，而其他的则被忽略。例如： //Sidebar.js const Sidebar = () => ( // ... <Helmet> <body className={menuOpen ? 'blur' : ''} /> </Helmet> // ...

我试图在body标记上有条件地设置一个类。这本身并不重要，也不是一个问题，但是当有多个组件同时有条件地写入body标记的class属性时，它们开始相互重写。其中只有一个保持活动状态，而其他的则被忽略。例如：

//Sidebar.js

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

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

const侧边栏=（）=>(
// ...
// ...
);

//Loader.js

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

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

const Loader=（）=>(
// ...
// ...
);

在本例中，侧边栏在激活时必须通过在body标记上设置一个类来禁用滚动（并模糊页面，用于设计目的）。加载程序需要在激活时禁用滚动（它是一个全屏预加载程序）。在这里，边栏组件具有优先权，加载程序组件中的头盔标记被忽略

我怎样才能做到这一点

编辑：当然，我可以使用DOM API手动设置/删除类，这就是我目前正在做的，但是想知道是否有更具反应性的方法来做到这一点。

在

类

属性中维护所需项目的数组，然后使用

头盔

应用数组

，但这意味着使用上下文API或通过组件树传递函数。简单地添加类不是太过分了吗？我认为这是上下文API的完美用例