如何将主题切换按钮移入Nav组件并实现正常的深色/浅色主题切换？

当然可以实现！这是React中状态提升+props传递的典型场景——主题状态原本就由App组件统一管理，我们只需要把切换主题的能力传递给Nav组件即可，具体步骤和修改后的代码如下：

步骤1：修改Nav组件，接收主题相关的Props #

首先让你的Nav组件接收两个关键参数：当前的主题状态，以及触发主题切换的函数。假设你的Nav组件原本结构如下：

function Nav() {
  return (
    <nav>
      {/* 原本的Nav内容，比如页面标题、导航链接等 */}
    </nav>
  );
}

现在修改它，添加接收Props的逻辑和切换按钮：

function Nav({ theme, toggleTheme }) {
  return (
    <nav>
      {/* 保留你原本的Nav内容 */}
      <button 
        className="theme" 
        onClick={toggleTheme}
      >
        {theme.mode === 'dark' ? '切换到浅色模式' : '切换到深色模式'}
      </button>
    </nav>
  );
}

步骤2：在App组件中给Nav传递Props #

回到你的App组件，把theme状态和切换主题的逻辑通过Props传给Nav，同时删掉原本App里的独立切换按钮：

const getBackground = style('mode', { light: "#eee", dark : "hsl(207, 26%, 17%)" });
const getBackground2 = style('mode', { light: "#eee", dark : "hsl(209, 23%, 22%)" });
const getForeground = style('mode', { light: "hsl(207, 26%, 17%)", dark : "#eee" });
const GlobalStyle = createGlobalStyle`
body { background-color : ${getBackground}; }
.country, nav, input, select, .back { background-color : ${getBackground2}; }
.info_container p, .info_container h2, nav, ::placeholder, .search_countries input, .search_countries::after, .select_countries::after, select, .info-state, .back span { color : ${getForeground}; }
`
function getInitialTheme () {
  const savedTheme = storage.getItem('theme');
  return savedTheme ? JSON.parse(savedTheme) : {mode: 'light'};
}
const App = () => {
  const [theme, setTheme] = useState(getInitialTheme);
  useEffect(()=>{
    storage.setItem('theme', JSON.stringify(theme))
  },[theme]);

  // 把切换逻辑抽成独立函数，代码更清晰
  const toggleTheme = () => {
    setTheme(prevTheme => ({
      mode: prevTheme.mode === 'dark' ? 'light' : 'dark'
    }));
  };

  return (
    <ThemeProvider theme={theme}>
      <Router>
        <>
          <GlobalStyle/>
          <div className="App">
            {/* 给Nav传递theme状态和toggleTheme函数 */}
            <Nav theme={theme} toggleTheme={toggleTheme} />
            {/* 移除原本App中的切换按钮 */}
            <Switch>
              <Route path="/" exact component={UbaciZemlje} />
              <Route path="/JednaZemljaInfo" exact component={JednaZemljaInfo} />
              <Route path="/JednaZemljaInfo/:name" component={JednaZemljaInfo} />
            </Switch>
          </div>
        </>
      </Router>
    </ThemeProvider>
  );
}
export default App;

原理说明 #

React遵循单向数据流原则：父组件的状态可以通过Props传递给子组件，子组件无法直接修改父组件的状态，但可以调用父组件传递过来的函数触发状态更新。这样主题状态依然由App组件统一管理（包括本地存储的持久化逻辑），Nav组件只负责渲染切换按钮并触发操作，既保证了状态的一致性，又实现了组件的职责分离。

内容的提问来源于stack exchange，提问作者aLEKSANDAR mILOSAVLJEVIC