TypeScript中使用react-toggle-dark-mode组件缺少onChange属性报错

TypeScript报错提示onChange是DarkModeSwitch组件Props的必填属性，你需要为组件添加这个回调函数来处理开关状态变化的逻辑，具体解决步骤如下：

1. 确保主题状态可管理 #

首先用useState（或你项目中已有的状态管理方案）维护主题状态：

import { useState } from 'react';
import { DarkModeSwitch } from "react-toggle-dark-mode";

const NavBar = () => {
  // 定义主题状态，限定类型为light/dark
  const [colorTheme, setColorTheme] = useState<'light' | 'dark'>('light');

2. 实现主题切换的回调函数 #

创建处理开关变化的函数，根据开关的选中状态切换主题：

const handleDarkModeToggle = (checked: boolean) => {
    // 根据checked值确定新主题
    const newTheme = checked ? 'dark' : 'light';
    setColorTheme(newTheme);
    // 可选：将主题持久化到localStorage，避免刷新后重置
    localStorage.setItem('theme', newTheme);
  };

3. 为DarkModeSwitch添加onChange属性 #

在组件中传入必填的onChange属性，绑定刚才定义的回调函数：

return (
    <div> 
      <DarkModeSwitch
        size={24}
        checked={colorTheme === "light" ? false : true}
        onChange={handleDarkModeToggle} // 新增必填属性
      />
    </div>
  );
};

export default NavBar;

已有状态管理方案的适配 #

如果你的项目用Context、Redux等全局状态管理主题，只需将onChange指向对应的状态更新方法即可，示例：

// 假设通过Context获取主题和更新方法
const { colorTheme, setColorTheme } = useThemeContext();

const handleDarkModeToggle = (checked: boolean) => {
  setColorTheme(checked ? 'dark' : 'light');
};

添加onChange属性并实现对应的状态更新逻辑后，TypeScript的必填属性报错就会消失。

内容的提问来源于stack exchange，提问作者هادی سالاری