在react中如何切换class

动态切换 class 的方法

使用模板字符串结合状态管理动态生成 class 名，通过条件判断决定是否添加特定 class：

<div className={`base-class ${isActive ? 'active-class' : ''}`}>

使用 classnames 库

安装 classnames 库后可通过对象语法更清晰地管理多个 class：

npm install classnames

实现方式：

import cn from 'classnames';
<div className={cn('static-class', {
  'conditional-class': condition,
  'another-class': otherCondition
})}>

行内样式切换

对于简单的样式切换，可直接通过状态控制 style 对象：

<div style={{
  color: isActive ? 'red' : 'black',
  fontWeight: isHighlighted ? 'bold' : 'normal'
}}>

条件渲染不同组件

当需要完全不同的 DOM 结构时，可渲染不同组件：

{isLoggedIn ? <AdminPanel /> : <LoginForm />}

CSS Modules 动态导入

结合 CSS Modules 实现局部作用域的 class 切换：

import styles from './styles.module.css';
<div className={isActive ? styles.active : styles.default}>