React 的 classnames 库

最近看到公司项目中经常使用了classnames这个库, 很好奇是干什么的, 看了文档以后才发现这个组件能够提供很好的动态css样式功能,配合基于状态的编程,真是非常的便利.

classnames 是一个简单的 JavaScript 工具包用来有条件的将不同的 className 联合在一起。

对比

例如我们以前的 className 是这样写的：

<div className={item.login? 'circle active': 'circle'} />

以这种写法来说不是太复杂，但是如果写多了就会发现代码太过臃肿

而使用了 classnames 这个库之后：

<div className={classNames('circle ', { acitve: item.login })} /> 

是不是觉得方便简介了许多

---

安装

$ yarn add classnames -D

or

$ npm install classnames -D

使用方法

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'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

在ES2015中可以使用动态的classname

classNames({ [`btn-${buttonType}`]: true });

数组对象：

const arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'