时间戳

首页 > 解决方案 > React：如何使用子组件的状态来影响父容器的样式？

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

问题描述

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

这是迄今为止我为 React 应用程序提供的代码沙箱。

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 还是很陌生。

标签： javascriptreactjsjsx

解决方案

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

该链接有这个完整的例子，它正是这样做的（事实上，切换主题，因为它发生了:-)）。

推荐阅读