在 React 中动态操作 className 是非常常见的需求，通常用于根据不同状态切换元素的样式。以下是几种常用的方法：

1. 使用字符串拼接：

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

2. 使用数组和 join 方法：

<div className={['base-class', isActive ? 'active' : ''].join(' ')}></div>

3. 使用对象语法（推荐）：

<div className={{
  'base-class': true,
  'active': isActive,
  'disabled': isDisabled
}}></div>

4.使用第三方库 classnames：

这是最常用的方式，先安装库：npm install classnames

import classNames from 'classnames';

// 使用方式
<div className={classNames('base-class', {
  'active': isActive,
  'disabled': isDisabled
})}></div>

// 也可以传入数组
<div className={classNames(['base-class', isActive && 'active'])}></div>

5. 在函数组件中封装使用：

import React, { useState } from 'react';
import classNames from 'classnames';

const DynamicClassExample = () => {
  const [isActive, setIsActive] = useState(false);
  const [isHovered, setIsHovered] = useState(false);
  
  // 使用classnames库处理动态类名
  const buttonClasses = classNames('btn', {
    'btn-active': isActive,
    'btn-hover': isHovered,
    'btn-disabled': !isActive && isHovered
  });
  
  return (
    <div className="container">
      <button
        className={buttonClasses}
        onClick={() => setIsActive(!isActive)}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        点击切换状态
      </button>
      
      {/* 不使用第三方库的方式 */}
      <div 
        className={`box ${isActive ? 'box-active' : ''} ${isHovered ? 'box-hover' : ''}`}
      >
        动态样式展示
      </div>
    </div>
  );
};

export default DynamicClassExample;

以上示例展示了在 React 中动态操作 className 的常见模式。使用 classnames 库可以让代码更简洁易读，特别是当需要处理多个条件类名时。

实际项目中，结合 CSS Modules 或 styled-components 等 CSS-in-JS 方案，还可以实现更复杂的样式管理，但核心的动态类名处理逻辑是相似的。