classNames库

简介

根据名称应该就可以猜想到这个库肯定跟class类名有关，实际上也确实是这样滴😆
那么我们为什么会用到这个库呢，请看下面👇
1、动态添加类名很容易出错；
2、代码比较简洁，一目了然；

用法区别

• 不使用classNames

import React, { Component } from 'react';
class App extends Component {
    state = {
        class1:true,
        class2:true
    };
    render() {
        const {class1,class2} = this.state;
        let divClass='class-test';
        divClass = class1 ? 'class-test-class1' : ' ';
        divClass = class2 ? 'class-test-class2' : ' ';
        return (
            <div className={divClass}>test</div>
        );
    }
}

export default App;

• 使用classNames

import React, { Component } from 'react';
import classNames from 'classnames';
class App extends Component {
    state = {
        class1:true,
        class2:true
    };
    render() {
        const {class1,class2} = this.state;
        let divClass=classNames({
              class-test-class1:class1,
              class-test-class2:class2
        })
        return (
            <div className={divClass}>test</div>
        );
    }
}

export default App;

classNames用法详解

• 安装

cnpm install classnames --save

• 使用

classNames('class1', 'class2'); // => 'class1 class2'
classNames('class1', { class2: true }); // => 'class1 class2'
classNames({ 'class1-class2': true }); // => 'class1-class2'
classNames({ 'class1-class2': false }); // => ''
classNames({ class1: true }, { class2: true }); // => 'class1 class2'
classNames({ class1: true, class2: true }); // => 'class1 class2'
classNames('class1', { class2: true, duck: false }, 'baz', { quux: true }); // => 'class1 class2 baz quux'
classNames(null, false, 'class2', undefined, 0, 1, { baz: null }, ''); // => 'class2 1'

• 传入动态class

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

参考资料

官方文档