项目开发中,当多个类名都是动态的,手动处理就会变得很困难,因此,推荐classnames包来优化类名处理
- 安装
npm install classnames
- 导入
import classNames from 'classnames'
- 使用
// 逻辑与(&&)----处理单个类名
className={classNames('nav-item', disabled && 'btn-disabled')}
//对象语法 ---处理多个类名
className={classNames('nav-item', {
'active': item.type === 'active',
'btn-disabled': disabled
})}