当前位置：首页 > React

react如何切换class

2026-01-15 08:47:40React

动态切换 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 对象适合简单的样式变化。

react如何切换class