npm（classnames） 更灵活使用类名

1.预备

一个简单的JavaScript实用程序，用于有条件地将类名连接在一起。

使用npm，Bower或Yarn安装：

npm:

npm install classnames --save

Bower:

bower install classnames --save

yarn:
使用yarn将自动得在package.json中 dependencies部分安装依赖。

yarn add classnames

在node.js&Browserify 或 webpack中使用。

或者，您可以在页面上使用独立的
<script>标签引入index.js，它将导出全局classNames方法，或者如果您使用RequireJS则定义模块。

2.使用

classNames函数接受任意数量的参数，这些参数可以是字符串或对象。

参数’foo’是{foo：true}的缩写。 如果给定键的值是假的，则该键不会包含在输出中。

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'

备注：如dva标签里同时绑定两个类名：

// css部分

.a{
    color:red;
}

.b{
    font-size:20px;
}

// page页

import styles from './index.css';

class Page extends Component{
    render(){
        return (
            <div className={classNames(styles.a, styles.b)}>
                ...
            </div>
        )
    }
}

数组将按顺序、扁平化得进行展开：

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

3.在动态类名中使用

如果您所在的环境支持计算密钥（在ES2015和Babel中可用），则可以使用动态类名：

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

4.在react中使用

（1）生成react类名属性

var Button = React.createClass({
  // ...
  render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

（2）可以更容易、有条件得生成类对象

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>;
  }
});

因为您可以将对象、数组、字符串参数混合在一起，即支持可选的类名。

props也更简单，因为结果中只包含truthy参数：

var btnClass = classNames('btn', this.props.className, {
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

5.可选的备用版本（删除重复数据）

有一个备用版本的classNames可以正确地重复数据删除类，并确保从结果集中排除后面参数中指定的有类别类。

此版本较慢（约5倍），因此它作为选择加入提供。

要将删除重复数据版本与Node.js，Browserify 或 webpack一起使用：

var classNames = require('classnames/dedupe');

classNames('foo', 'foo', 'bar'); // => 'foo bar'
classNames('foo', { foo: false, bar: true }); // => 'bar'

6.可选的bind版本（css模块化）

如果您正在使用css-modules或抽象类“names”的类似方法以及输出到DOM的实际className值，您可能希望使用绑定变体。

请注意，在ES2015环境中，最好使用上面记录的“动态类名”方法。

var classNames = require('classnames/bind');

var styles = {
  foo: 'abc',
  bar: 'def',
  baz: 'xyz'
};

var cx = classNames.bind(styles);

var className = cx('foo', ['bar'], { baz: true }); // => "abc def xyz"

Real-world example:

/* components/submit-button.js */

import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';

let cx = classNames.bind(styles);

export default class SubmitButton extends Component {
  render () {
    let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
    let className = cx({
      base: true,
      inProgress: this.props.store.submissionInProgress,
      error: this.props.store.errorOccurred,
      disabled: this.props.form.valid,
    });
    return <button className={className}>{text}</button>;
  }
};

---

classNames> = 2.0.0
Array.isArray：有关不支持的旧浏览器（例如<= IE8）和简单的polyfill的详细信息，请参阅MDN。

Object.keys：有关不受支持的旧浏览器（例如<= IE8）和简单的polyfill的详细信息，请参阅MDN。 这仅用于dedupe.js。