一、为什么使用 classnames 这个库

在 react 开发中，我们有的时候需要使用 js 来动态判断是否为组件添加 class（类名），这里我们使用到了 classnames

二、学习网址

https://www.npmjs.com/package/classnames
https://github.com/JedWatson/classnames

三、安装与引入

安装

npm install classnames --save

引入

import classnames from "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/>

例子：

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'

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

let buttonType = "primary";
classnames({ [`btn-${buttonType}`]: true });