classnames:react官方推荐的动态引入类名的库

我们在react开发写scss时，可能会遇到要为一个标签动态添加多个类，但是在这个时候，原生的react会报错：

<div className={styles.class1 styles.class2}</div>  //报错

这时候可以引用官方推荐的动态引入类的库：classnames。

npm install classnames --save  ||  yarn add classnames

<Button className={classnames({//这里可以根据各属性动态添加，如果属性值为true则为其添加该类名，//如果值为false，则不添加。这样达到了动态添加class的目的base: true,inProgress: this.props.store.submissionInProgress,error: this.props.store.errorOccurred,disabled: this.props.form.valid,})}>
<Button/>

 注意：要默认引入时，后面的true可以省略，但是写上可以更直观。

来自官网的其他引入方法：

classNames('foo', 'bar'); // => '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的参数可以是字符串、数组、对象： 

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

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

当然最有用的就是可以动态引入和按条件引入：

let buttonType = 'primary';  动态引入class名

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

 var classNames = require('classnames');
 
var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
});     通过条件判断是否引入该类。

（代码来自classnames官网：https://www.npmjs.com/package/classnames）