classnames库

1. classname库

1. 定义：react中想要动态添加className时，还会使用classnames这个库
2. 使用方法：

• 引入classnames：import classnames from classnames
• Classnames是一个函数，使用的形式较多，有以下几种方式：

1. 传入一个对象：classnames（{class1:true,class2:false}）,ture表示相应的class生效，反之false不生效
2. 接收多个类名：classnames（class1，class2）
3. 使用动态类名：

let buttonType = 'primary';

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

1. 传入数组对象：

var arr = ['b', { c: true, d: false }];

classNames('a', arr); // => 'a b c'

1. 例子：

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'

1. ClassName写法：