react如何设置类名
在React中设置类名
React中设置类名主要通过className属性实现，因为class是JavaScript的保留关键字，无法直接使用。以下是几种常见方法：
使用字符串直接设置
通过字符串直接传递类名，适用于静态类名：
<div className="container active">内容</div>动态设置类名
结合模板字符串或条件判断动态生成类名：
const isActive = true;
<div className={`container ${isActive ? 'active' : ''}`}>使用第三方库（如classnames）
安装classnames库后可以更灵活地组合类名：
npm install classnames使用示例：
import cn from 'classnames';
const buttonClasses = cn('btn', {
'btn-active': isActive,
'btn-disabled': isDisabled
});
<button className={buttonClasses}>点击</button>通过CSS Modules管理
在支持CSS Modules的项目中直接导入样式：
import styles from './Button.module.css';
<button className={styles.primary}>按钮</button>注意事项
- React 17及以下版本需要手动处理CSS Modules的类名拼接
- 使用内联样式时应当用
style属性而非类名 - 类名命名建议遵循BEM等CSS方法论保持可维护性
