根据条件渲染className

在前端开发中，我们经常会遇到需要根据不同条件设置class的值

就像这样

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

上面示例代码中，如果this.state.isPressed是true，则button的classname就是，'btn'+'btn-pressed'。如果this.state.isHovered是true，则button的classname就是，'btn'+'btn-over'。

通过条件语句判断来设置classname的确定值。这样的写法不太简洁也不优雅。

现在通过classnames，我们可以很简单的写出符合上面需求的代码

classnames是一个可以让你简单的有条件设置className值的js工具。使用方法非常简单

//引入classNames
import classnames from "classnames"

const Button = React.createClass({
  // ...
  render () {
    let btnClass = classnames({
      'btn': true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    // 当this.state.isPressed，而this.state.isHovered为false时，这里的'btnClass'就是'btn btn-pressed'
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

classnames函数可以设置任意数量的参数，这些参数可以是字符串也可以是对象。如果参数的值是fasly，那么它就不会被输出.

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'

classnames也支持ES6的模板字符串

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