React点击按钮切换CSS类的TypeScript类型报错修复

你当前的写法有两个核心问题：

• 原生HTML<button>元素的className属性仅接受字符串类型值，你传入了一个函数，和TS定义的属性类型不匹配。你用的函数传参写法是react-router-dom库中NavLink组件的专属API，只对导航链接组件生效。
• 你没有在组件内部声明isActive状态变量，也没有绑定点击事件做状态切换，本身逻辑也不完整。

用React内置的useState维护按钮激活状态，点击时切换状态，直接根据状态值传入对应样式类即可：

import { useState } from 'react';

// 在你的组件内部声明状态
const [isActive, setIsActive] = useState<boolean>(false);

<button
  className={isActive ? isActiveStyle : isNotActiveStyle}
  onClick={() => setIsActive(active => !active)}
>
  你的按钮文本
</button>

如果你本来的需求是做侧边栏/导航栏的路由项高亮，不要用普通button标签，替换为react-router-dom提供的NavLink组件即可，该组件原生支持className传函数的写法，会自动注入路由匹配状态的isActive参数：

import { NavLink } from 'react-router-dom';

<NavLink
  to="/your-route-path"
  className={({ isActive }) => isActive ? isActiveStyle : isNotActiveStyle}
>
  导航项文本
</NavLink>

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