react如何切换class

在React中切换class

React中动态切换class可以通过多种方式实现，核心是利用状态管理结合条件判断或第三方库简化操作。

使用模板字符串与状态管理

通过React的useState管理当前class状态，结合模板字符串动态拼接类名：

import { useState } from 'react';

function Component() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className={`base-class ${isActive ? 'active-class' : ''}`}>
      <button onClick={() => setIsActive(!isActive)}>
        切换Class
      </button>
    </div>
  );
}

使用classnames库

安装classnames库可更优雅地处理复杂类名逻辑：

npm install classnames

实现方式：

import classnames from 'classnames';

function Component() {
  const [isActive, setIsActive] = useState(false);

  const classes = classnames('base-class', {
    'active-class': isActive,
    'error-class': hasError // 可扩展其他条件
  });

  return (
    <div className={classes}>
      <button onClick={() => setIsActive(!isActive)}>
        切换Class
      </button>
    </div>
  );
}

通过style对象动态切换

适用于需要完全替换class的场景：

function Component() {
  const [usePrimary, setUsePrimary] = useState(true);

  return (
    <div className={usePrimary ? 'primary-style' : 'secondary-style'}>
      <button onClick={() => setUsePrimary(!usePrimary)}>
        切换样式
      </button>
    </div>
  );
}

注意事项

• 动态class名需在CSS中预定义对应样式
• 条件较复杂时推荐使用classnames库
• 避免直接操作DOM元素的className属性