Next.js中实现点击Navbar组件事件修改_app.js内主题变量的需求问询

要实现这个需求，核心是利用React的状态提升机制——子组件无法直接修改父组件的变量，我们需要把主题状态放在根组件_app.js中管理，再通过props传递修改状态的函数给Navbar组件，从而触发主题更新并同步到所有依赖的组件。

步骤1：改造_app.js，将主题变量转为状态并添加修改函数 #

首先，在_app.js中引入React的useState钩子，把原本固定的primary和secondary变量转为可修改的状态，并定义一个更新主题的函数：

// _app.js
import { useState } from 'react';
import Layout from '../components/Layout'; // 根据你的实际路径调整

function MyApp({ Component, pageProps }) {
  // 初始化主题状态为深色模式
  const [theme, setTheme] = useState({
    primary: 'darkMode_Primary',
    secondary: 'darkMode_Secondary'
  });

  // 定义主题更新函数，这里示例是切换深浅色，你可以根据需求自定义逻辑
  const handleThemeUpdate = () => {
    setTheme(prevTheme => ({
      primary: prevTheme.primary === 'darkMode_Primary' 
        ? 'lightMode_Primary' 
        : 'darkMode_Primary',
      secondary: prevTheme.secondary === 'darkMode_Secondary' 
        ? 'lightMode_Secondary' 
        : 'darkMode_Secondary'
    }));
  };

  return (
    <Layout 
      primary={theme.primary} 
      secondary={theme.secondary}
      onThemeUpdate={handleThemeUpdate} // 将修改函数传递给Layout
    >
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

步骤2：修改Layout组件，传递主题更新函数给Navbar #

Layout组件需要接收onThemeUpdate函数，并把它传递给Navbar组件：

// Layout.js
import Navbar from './Navbar';
import ModeSwitch from './ModeSwitch';

function Layout({ primary, secondary, onThemeUpdate, children }) {
  return (
    <div className="layout-container">
      {/* 将主题变量和修改函数都传递给Navbar */}
      <Navbar 
        primary={primary} 
        secondary={secondary} 
        onThemeUpdate={onThemeUpdate} 
      />
      <ModeSwitch primary={primary} secondary={secondary} />
      <main>{children}</main>
    </div>
  );
}

export default Layout;

步骤3：修改Navbar组件，绑定点击事件到主题更新函数 #

最后，在Navbar组件中，把onClick事件绑定到传递过来的onThemeUpdate函数，这样点击<h3>时就会触发主题修改：

// Navbar.js
function Navbar({ primary, secondary, onThemeUpdate }) {
  return (
    <nav className="navbar">
      <h3 
        className={`NAV_head ${primary}`} // 关联主题类名，实现样式更新
        onClick={onThemeUpdate}
      >
        点击切换主题
      </h3>
      {/* 其他Navbar内容 */}
    </nav>
  );
}

export default Navbar;

额外优化：持久化主题（可选） #

如果希望刷新页面后保持当前主题，可以借助localStorage来持久化状态，修改_app.js中的状态初始化和更新逻辑：

// _app.js 持久化版本
import { useState } from 'react';
import Layout from '../components/Layout';

function MyApp({ Component, pageProps }) {
  // 从localStorage读取保存的主题，没有则用默认深色
  const [theme, setTheme] = useState(() => {
    const savedTheme = localStorage.getItem('appTheme');
    return savedTheme ? JSON.parse(savedTheme) : {
      primary: 'darkMode_Primary',
      secondary: 'darkMode_Secondary'
    };
  });

  const handleThemeUpdate = () => {
    setTheme(prevTheme => {
      const newTheme = {
        primary: prevTheme.primary === 'darkMode_Primary' 
          ? 'lightMode_Primary' 
          : 'darkMode_Primary',
        secondary: prevTheme.secondary === 'darkMode_Secondary' 
          ? 'lightMode_Secondary' 
          : 'darkMode_Secondary'
      };
      // 保存新主题到localStorage
      localStorage.setItem('appTheme', JSON.stringify(newTheme));
      return newTheme;
    });
  };

  return (
    <Layout 
      primary={theme.primary} 
      secondary={theme.secondary}
      onThemeUpdate={handleThemeUpdate}
    >
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

原理说明 #

• 状态提升：把主题状态放在根组件MyApp中，确保所有依赖主题的子组件都能获取到最新状态。
• 单向数据流：通过props传递状态和修改函数，子组件触发函数后，父组件更新状态，再把新状态同步给所有子组件，实现样式更新。
• 样式关联：假设你的CSS中已经定义了.darkMode_Primary、.lightMode_Primary等类的样式，当主题变量改变时，<h3>的className会更新，从而应用对应的样式。

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