React中如何向Toggle组件传递Props实现主题切换？

问题分析 #

当前代码存在三个核心问题导致主题切换功能失效：

• theme.jsx中toggleThemeMode函数更新状态时，错误地将对象格式的theme改为字符串格式，破坏了状态结构
• Header.jsx未向Toggle组件传递必填的checked属性，违反了组件的PropTypes校验
• Toggle组件的回调处理可简化，无需额外封装冗余逻辑

修复步骤 #

1. 修正Theme Context的状态更新逻辑

在theme.jsx中，确保toggleThemeMode函数保持状态为对象格式（与初始状态一致）：

// theme.jsx
import { createContext, useContext, useState } from "react";

const DARK = "DARK";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState({ mode: "LIGHT" });

  const toggleThemeMode = () => {
    // 保持状态为{ mode: string }的对象格式
    setTheme({ mode: theme.mode === DARK ? "LIGHT" : DARK });
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleThemeMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

const useTheme = () => useContext(ThemeContext);

export { ThemeProvider, useTheme, DARK };

2. 完善Header组件中Toggle的Props传递

在Header.jsx中，向Toggle传递checked属性（绑定当前主题状态），并简化回调函数：

// Header.jsx
import React from "react";
import { DARK, useTheme } from "../../contexts/theme";
import { Toggle } from "./toggle";

import logo from "../../assets/images/logo.svg";
import profilePicture from "../../assets/images/profile.jpg";

const Header = () => {
  const { theme, toggleThemeMode } = useTheme();

  const showMobileMenu = () => {
    document.getElementById("main-wrapper").classList.toggle("show-sidebar");
  };

  const isDark = theme.mode === DARK;

  return (
    <header className="topbar navbarbg" data-navbarbg="skin6">
      <nav className={`navbar navbar-${isDark ? "dark" : "light"} h-100`}>
        <div className="navbar-header" id="logobg" data-logobg="skin6">
          <a className="navbar-brand" href="/">
            <b className="logo-icon">
              <img src={logo} alt="homepage" className="dark-logo" />
            </b>
          </a>
          <button
            className="btn-link nav-toggler d-block d-md-none"
            onClick={showMobileMenu}
          >
            <i className="ti-menu ti-close" />
          </button>
        </div>
        {/* 传递checked属性和回调函数，可选添加动态标签 */}
        <Toggle 
          checked={isDark} 
          onChange={toggleThemeMode} 
          label={isDark ? "切换到浅色模式" : "切换到深色模式"}
        />
        <div className="collapse navbarbg show">
          <div className="dropdown">
            <img
              src={profilePicture}
              alt="user"
              className="rounded-circle"
              width="31"
            />
          </div>
        </div>
      </nav>
    </header>
  );
};

export default Header;

3. 优化Toggle组件的回调处理（可选）

如果不需要使用event参数，可以简化Toggle组件的handleChange：

// toggle.jsx
import PropTypes from "prop-types";

const Toggle = ({ checked, onChange, label = "" }) => {
  // 直接调用onChange，无需传递event（如果不需要的话）
  const handleChange = () => {
    onChange?.();
  };

  return (
    <div className="form-check form-switch">
      <input
        className="form-check-input"
        type="checkbox"
        id="flexSwitchCheckDefault"
        checked={checked}
        onChange={handleChange}
      />
      <label
        className="form-check-label"
        htmlFor="flexSwitchCheckDefault">
        {label}
      </label>
    </div>
  );
};

Toggle.propTypes = {
  checked: PropTypes.bool.isRequired,
  onChange: PropTypes.func,
  label: PropTypes.string,
};

export { Toggle };

功能验证 #

完成上述修改后：

• Toggle开关的状态会与当前主题模式同步（深色模式时开关为选中状态）
• 点击Toggle会触发toggleThemeMode函数，正确切换主题状态
• Header的导航栏会根据主题模式自动切换navbar-dark/navbar-light类

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