简介
根据名称应该就可以猜想到这个库肯定跟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
