React 组件间状态传递：从孙子组件更新父组件状态的实践指南

import React, { useState } from 'react';
import Navbar from './Navbar';
import Hero from './Hero'; // 假设存在

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

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

export default App;

import React from 'react';
import DarkMode from './DarkMode';

const Navbar = ({ darkMode }) => { // 接收darkMode值
  return (
    <div className="row">
      <div className="col">
        <h3>This is the Navbar component</h3>
      </div>
      <div className="col">
        <DarkMode darkMode={darkMode} /> {/* 仅传递状态值 */}
      </div>
    </div>
  )
}      

export default Navbar;

import React, { useState } from 'react';
import SunIcon from './SunIcon.png'; // 假设存在
import MoonIcon from './MoonIcon.png'; // 假设存在

const DarkMode = ({ darkMode }) => { // 接收darkMode值，但没有更新机制
  // 注意：这里自己的isDarkMode状态与父组件的darkMode状态是独立的，无法影响父组件
  const [isDarkMode, setDarkMode] = useState(false); 
  const [imageSrc, setImageSrc] = useState(SunIcon);

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

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

export default DarkMode;

import React, { useState } from 'react';
import Navbar from './Navbar';
import Hero from './Hero';

const App = () => {
  const [darkMode, setDarkMode] = useState(true); // 全局主题状态和设置器

  return (
    <div className={darkMode ? "darkmode" : "lightmode"}>
      {/* 将darkMode状态和setDarkMode设置器都传递给Navbar */}
      <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
      <Hero />
    </div>
  );
}

export default App;

import React from 'react';
import DarkMode from './DarkMode';

const Navbar = ({ darkMode, setDarkMode }) => { // 接收darkMode和setDarkMode
  return (
    <div className="row">
      <div className="col">
        <h3>This is the Navbar component</h3>
      </div>
      <div className="col">
        {/* 将接收到的darkMode和setDarkMode继续传递给DarkMode */}
        <DarkMode darkMode={darkMode} setDarkMode={setDarkMode} />
      </div>
    </div>
  )
} 

export default Navbar;

import React from 'react';
import SunIcon from './SunIcon.png';
import MoonIcon from './MoonIcon.png';

const DarkMode = ({ darkMode, setDarkMode }) => { // 接收darkMode和setDarkMode

  const switchModes = () => {
    // 调用父组件传递下来的setDarkMode函数，直接更新App.js中的darkMode状态
    setDarkMode(!darkMode); 
  };

  return (
    <>
      <button>
        <img
          className=""
          onClick={switchModes}
          // 图片源直接根据父组件传递的darkMode状态决定
          src={darkMode ? SunIcon : MoonIcon} 
          alt="lightning-bolt"
          height="30px"
        />
      </button>
    </>
  )
}

export default DarkMode;