React：如何使用子组件的状态来影响父容器的样式？答案

【问题标题】：React: How to use child component's state to affect parent container's styles?React：如何使用子组件的状态来影响父容器的样式？
【发布时间】：2020-09-08 15:19:21
【问题描述】：

所以我正在努力将我的作品集翻译成 React。我原来的网站有一个切换按钮，它有一个非常简单的 onclick 功能，可以切换容器的类，它都是一个 html 文件和一个脚本文件，我想我很难使用 React，因为有很多层。

Here is the code sandbox for what I have so far for the React app.

Toggler 组件位于 Navbar 内部，后者位于 BaseLayout 内部，BaseLayout 具有一个带有“light”类的容器。我的目标是让导航栏中的切换器在“浅色”和“深色”之间来回更改该容器的类。

这就是 Toggler 的样子。

export default function Toggler() {
  let [theme, setTheme] = useState("light");

  function handleClick() {
    theme === "light" ? setTheme("dark") : setTheme("light");
  }

  return (
    <div className={Style.toggler} onClick={handleClick}>
      {theme === "light" ? <span>????</span> : <span>????</span>}
    </div>
  );
}

我遇到的问题是将状态逻辑导出回 BaseLayout，以便容器的类可以更改。任何帮助是极大的赞赏！如果这是一个愚蠢的问题，我对 React 还是很陌生。

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

主题之类的东西是context 有用的地方。您将整个组件树包装在上下文中，并在主题按钮中使用上下文中的设置器来更新上下文的状态。

那个链接有this full example 正是这样做的（事实上，切换主题，碰巧:-)）。

【讨论】：