React多层级组件状态管理：从孙子组件向祖父组件传递数据

// App.js (祖父组件)
const App = () => {
  const [darkMode, setDarkMode] = useState(true); // 状态在此定义

  return (
    <div className={darkMode ? "darkmode" : "lightmode"}>
      <Navbar darkMode={darkMode}/> {/* 只传递了状态值 */}
      <Hero />
    </div>
  );
}

// Navbar.js (子组件)
const Navbar = ({darkMode}) => {
  return (
    <div className="row">
      <div className="col">
        <h3>This is the Navbar component</h3>
      </div>
      <div className="col">
        <DarkMode darkMode={darkMode} /> {/* 只传递了状态值 */}
      </div>
    </div>
  )
}      

// DarkMode.js (孙子组件)
const DarkMode = ({darkMode}) => {
  // 在这里定义了一个独立的状态，与App.js中的状态不关联
  const [isDarkMode, setDarkMode] = useState(false); 
  const [imageSrc, setImageSrc] = useState(SunIcon);

  const switchModes = () => {
    setDarkMode(prevMode => !prevMode); // 仅更新自身状态
    isDarkMode ? setImageSrc(SunIcon) : setImageSrc(MoonIcon);
  };

  return (
    <>
      <button>
        <img
          className=""
          onClick={switchModes}
          src={imageSrc}
          alt="lightning-bolt"
          height="30px"
        />
      </button>
    </>
  )
}

// App.js (祖父组件)
import React, { useState } from 'react';
import Navbar from './Navbar';
import Hero from './Hero'; // 假设 Hero 组件存在

const App = () => {
  const [darkMode, setDarkMode] = useState(true); // 全局状态定义

  return (
    <div className={darkMode ? "darkmode" : "lightmode"}>
      {/* 将状态值和状态更新函数一并传递给 Navbar */}
      <Navbar darkMode={darkMode} setDarkMode={setDarkMode}/> 
      <Hero />
    </div>
  );
}

export default App;

// Navbar.js (子组件)
import React from 'react';
import DarkMode from './DarkMode';

const Navbar = ({darkMode, setDarkMode}) => { // 接收状态值和更新函数
  return (
    <div className="row">
      <div className="col">
        <h3>This is the Navbar component</h3>
      </div>
      <div className="col">
        {/* 将状态值和更新函数继续传递给 DarkMode */}
        <DarkMode darkMode={darkMode} setDarkMode={setDarkMode} />
      </div>
    </div>
  )
} 

export default Navbar;

// DarkMode.js (孙子组件)
import React, { useState } from 'react';
import SunIcon from './SunIcon.png'; // 假设图标路径正确
import MoonIcon from './MoonIcon.png'; // 假设图标路径正确

const DarkMode = ({darkMode, setDarkMode}) => { // 接收状态值和更新函数
  // 移除内部的 isDarkMode 状态，直接使用父组件传递的 darkMode
  // imageSrc 也不需要独立状态，直接根据 darkMode 判断

  const switchModes = () => {
    // 调用父组件传递的 setDarkMode 函数来更新全局状态
    setDarkMode(!darkMode); 
  };

  return (
    <>
      <button>
        <img
          className=""
          onClick={switchModes}
          // 根据父组件传递的 darkMode 状态来决定显示哪个图标
          src={darkMode ? SunIcon : MoonIcon} 
          alt="toggle theme"
          height="30px"
        />
      </button>
    </>
  )
}

export default DarkMode;