Javascript 使用React组件在主体上切换类的正确方法？

在特定组件之外的标记上切换类的正确方法是什么

因此，目前我有以下工作示例：

import React, { useState, useEffect } from "react";

export default function Header() {
  const [toggled, setToggled] = useState(0);

  useEffect(() => {
    document.body.classList.toggle("toggled");
  });

  return (
    <nav>
      <ul>
        <li>
          <a onClick={() => setToggled(!toggled)} href="#">
            Open menu
          </a>
        </li>
      </ul>
    </nav>
  );
}

import React，{useState，useffect}来自“React”；
导出默认函数头（）{
const[toggled，setToggled]=useState（0）；
useffect（（）=>{
document.body.classList.toggle（“切换”）；
});
返回(




);
}

出于某种原因，这感觉是错误的

首先，我使用document.body.classList.toggle代替useState变量。我知道当切换这个头组件中的类时，我只会使用useState而不是useEffect。但是当我需要在组件之外切换一些类时，比如在我的例子中，单独使用useState可以吗

其次，我应该在useEffect中使用document.body.classList.toggle，还是有更具体的方法？如果我想以没有任何id或类的其他元素为目标呢

---

最后，如果有人想知道的话，我将在主体上切换类，而不是直接在标题组件中切换，因为我想修改一行中的许多不同元素，而不仅仅是菜单。

看起来像是一个X/Y问题-如果你想更改应用程序范围的UI，你应该更改主组件上的状态（理想情况下，它包含整个应用程序的父HtmleElement），如：

函数应用程序（）{
const[showNav，setShowNav]=useState（false）；
函数toggleNav（）{
设置显示导航（！显示导航）；
}
返回(
...
);
}
函数头（{onButtonClick}）{
返回(
菜单
...
);
}

---

如果您需要在组件树下传递不同层次的函数，我建议使用状态容器。

这听起来很合理，它肯定让我走上了正确的轨道。与我的示例中的useEffect相比，这样的东西如何？顺便问一下，我从未使用过redux，您如何使用它解决这个问题？您的应用程序roach更难测试，因为它直接修改DOM。如果您没有使用redux或类似工具，我建议您阅读他们的介绍指南^^^粗略的想法是您从组件启动一个操作，全局状态会得到更新。任何需要状态的人都可以通过

useSelector

挂钩而不是通过道具来获取状态。