React 中使用 classnames

什么是classnames

classnames 简单的说就是一个把多个className链接起来的工具

优点

' 在开发的过程中，遇到通过动态条件来添加className，以往的做法：

class Button extends React.Component {
  // 实现：一个按钮通过是否按压，是否hover来动态添加样式的功能。
  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>;
  }
}

您在敲敲使用classnames带来的简便，以及代码的简洁优雅。

import classnames from 'classnames'
class Button extends React.Component { 
  render () {
    const { isPressed, isHovered } = this.state;
    // 所以状态集中管理
    var btnClass = classNames({
       btn: true,
      'btn-pressed': isPressed,
      'btn-over': !isPressed && isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

认识classnames

安装

`npm install classnames` or `yarn add classnames`

格式

`classnames(参数1,参数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'

也可以把一个数组，按照以下规则递归平展：

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

如果你的开发环境支持 ES5，类名也可以动态化：

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

支持来源：classnames-github