react如何切换class
动态切换 React 组件的类名
在 React 中动态切换类名可以通过多种方式实现，以下是常见的几种方法：
使用模板字符串和状态管理
function MyComponent() {
const [isActive, setIsActive] = useState(false);
return (
<div className={`base-class ${isActive ? 'active' : ''}`}>
Content
</div>
);
}使用 classnames 库 安装 classnames 库可以更简洁地处理多个类名条件：
npm install classnames使用示例：
import classNames from 'classnames';
function MyComponent() {
const [isActive, setIsActive] = useState(false);
const className = classNames('base-class', {
'active': isActive,
'disabled': !isActive
});
return <div className={className}>Content</div>;
}使用 style 对象 对于简单的样式切换，可以直接使用 style 对象：
function MyComponent() {
const [isActive, setIsActive] = useState(false);
return (
<div style={{
color: isActive ? 'red' : 'black',
fontWeight: isActive ? 'bold' : 'normal'
}}>
Content
</div>
);
}结合 CSS Modules 当使用 CSS Modules 时，类名切换方式略有不同：
import styles from './MyComponent.module.css';
function MyComponent() {
const [isActive, setIsActive] = useState(false);
return (
<div className={`${styles.base} ${isActive ? styles.active : ''}`}>
Content
</div>
);
}这些方法都可以根据组件状态或属性动态改变元素的类名，从而实现样式切换效果。选择哪种方法取决于项目需求和个人偏好。classnames 库在处理复杂类名逻辑时特别有用，而内联 style 对象适合简单的样式变化。
