React中classnames库使用

最近在写React的项目中，看到之前的大佬引入的classnames组件库，特别的实用，在此跟大家分享一下。

从名字上可以看出，这个库是和类名有关的。官方的介绍就是一个简单的支持动态多类名的工具库。

classnames的引入
支持使用 npm, Bower, or Yarn

使用 npm安装

npm install classnames

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用 Bower安装

bower install classnames

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用 Yarn安装

yarn add classnames

        

          
        
        
        

          

          AI 代码解读
        
      
      

引入

import classnames from ‘classnames’;

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用 Node.js, Browserify, or webpack:

var classNames = require('classnames');

classNames('foo', 'bar'); // => 'foo bar'

        

          
        
        
        

          

          AI 代码解读
        
      
      

classnames函数的使用
classNames 函数接受任意数量的参数，可以是string、boolean、number、array、dictionary等。

参数 'foo' 是 { foo: true } 的缩写。如果与给定键关联的值是false的，则该key值将不会包含在输出中。

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'

        

          
        
        
        

          

          AI 代码解读
        
      
      

数组的形式
数组可以按照上面的规则，递归展开数组中的每一项：

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

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

ES6中使用动态类名

let buttonType = 'primary';`

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

结合React一起使用
这个包是classSet的官方替代品，她最初是在React.js插件包中提供的。

常见的一个应用场景是根据条件动态设置类名，在React中是会写出如下的代码：

class Button extends React.Component {
   

// ...

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

}

}

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用classnames可以通过对象非常方便的写出条件多类名。

var classNames = require('classnames');

class Button extends React.Component {
   

// ...

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

}

}

        

          
        
        
        

          

          AI 代码解读
        
      
      

因为可以将对象、数组和字符串参数混合在一起，所以支持可选的 className props 也更简单，因为只有真实的参数才会包含在结果中：

var btnClass = classNames('btn', this.props.className, {
   

'btn-pressed': this.state.isPressed,

'btn-over': !this.state.isPressed && this.state.isHovered

});

        

          
        
        
        

          

          AI 代码解读
        
      
      

总结：
在React项目中使用classnames是非常方便我们管理动态多类名。为我们的工作真正的提效。