如何将孙组件DarkMode的状态/事件正确传递至父组件App？

你的需求完全可行，核心是把状态统一托管在最顶层的App组件，然后通过props把状态和切换函数逐层传递给子组件、孙组件，避免在孙组件里维护独立状态导致的不同步问题。下面是具体修改步骤：

1. 修改App.js：定义切换函数并传递给Navbar #

App作为状态的持有者，需要创建切换暗黑模式的函数，把这个函数和当前darkMode状态一起传给Navbar组件：

const App = () => {
  const [darkMode, setDarkMode] = useState(true);

  // 定义切换函数，用于更新darkMode状态
  const toggleDarkMode = () => {
    setDarkMode(prev => !prev);
  };

  return (
    <div className={darkMode ? "darkmode" : "lightmode"}>
      {/* 把darkMode状态和toggleDarkMode函数传给Navbar */}
      <Navbar darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
      <Hero />
    </div>
  );
}

2. 修改Navbar.js：转发切换函数给DarkMode #

Navbar组件接收App传来的toggleDarkMode函数，再把它和darkMode一起传给DarkMode组件：

const Navbar = ({darkMode, toggleDarkMode}) => {
  return (
    <div className="row">
      <div className="col">
        <h3>This is the Navbar component</h3>
      </div>
      <div className="col">
        {/* 把状态和切换函数传给孙组件DarkMode */}
        <DarkMode darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
      </div>
    </div>
  )
}      

3. 修改DarkMode.js：使用父组件传递的状态和切换函数 #

移除DarkMode自己的isDarkMode状态，直接使用App传来的darkMode状态控制图标显示，点击按钮时调用传入的toggleDarkMode函数：

const DarkMode = ({darkMode, toggleDarkMode}) => {
  // 根据传入的darkMode状态确定显示的图标
  const imageSrc = darkMode ? SunIcon : MoonIcon;

  return (
    <>
      <button onClick={toggleDarkMode}>
        <img
          src={imageSrc}
          alt={darkMode ? "切换到亮色模式" : "切换到暗色模式"}
          height="30px"
        />
      </button>
    </>
  )
}

关键说明 #

• 状态统一放在顶层组件（App），保证整个应用的状态唯一且同步
• 通过props逐层传递状态和操作函数，实现嵌套组件间的通信
• 孙组件不再维护独立状态，只负责UI渲染和触发父组件传来的操作函数，符合React的单向数据流原则

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