一、classnames 现在到处都追求效率开发,所谓存在即合理,各种各样的开源包/项目火热,也是因为他们大大解决了之前复杂的逻辑.作为榜上前10的热门包:classnames.还真需要了解了解它才能仗'包'走天涯 官方定义: A simple JavaScript utility for conditionally joining classNames together. 理解: 帮助你在React项目更好地使用className 二、使用方法 在认识classnames之前,你可能会有一个疑问: 我发誓我现在react自带的className用得挺好的,还需要引入classnames吗? 先举个小反例吧 错误 import styles from './style.less' //不允许存在多个变量 正确 import styles from './style.css' import classNames from 'classnames' let divClass = classNames({ 'div': true, 'div1': true }) //输出class="div div1" 当然,机智的你当然想到了可以用字符串模板解决 "干嘛弄这么麻烦?直接import './style.css'不就行了?" import from './styles.css' 以上就是CSS Modules的基本原理.更多用法可以参考：《Ant Design Pro - 样式》 当然说那么多，也是想证明一下classnames的优秀 classnames语法 //基础用法 classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNames({ 'foo-bar': false }); // => '' classNames({ foo: true }, { bar: true }); // => 'foo bar' classNames({ foo: true, bar: true }); // => 'foo bar' // 各种各样属性结合 classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux' // 一些不存在/空的属性会自动忽略 classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1' //数组会遍历输出 var arr = ['b', { c: true, d: false }]; classNames('a', arr); // => 'a b c' //字符串模板方式 let buttonType = 'primary'; classNames({ [`btn-${buttonType}`]: true }); 通过状态控制样式的添加删除,简直不要太方便.从此告别removeClass之类方法 结合React用法 动态控制按钮样式 constructor(arg){ super(arg) this.state = { isPressed: false, isHovered: true } } render(){ var btnClass = classNames({ btn: true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return( ) } // 输出====> 按钮 结合`CSS Modules`用法 CSS Modules介绍:《css-modules》 import classNames from 'classnames/bind'; let styles = { key1: 'div', key2: 'div1', key3: 'div2' }; let cssModulesClass = classNames.bind(styles); let divClassName = cssModulesClass('key1', ['key2']); // => "div div1" 更多用法可以参考:《npm-https://www.cnblogs.com/soyxiaobi/p/9729289.html