在前端開發(fā)中，我們經(jīng)常會(huì)遇到需要根據(jù)不同條件設(shè)置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'绸贡。
通過條件語句判斷來設(shè)置classname的確定值盯蝴。這樣的寫法不太簡潔也不優(yōu)雅。
現(xiàn)在通過classnames听怕，我們可以很簡單的寫出符合上面需求的代碼
classnames是一個(gè)可以讓你簡單的有條件設(shè)置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
});
// 當(dāng)this.state.isPressed，而this.state.isHovered為false時(shí)尿瞭，這里的'btnClass'就是'btn btn-pressed'
return <button className={btnClass}>{this.props.label}</button>;
}
});
classnames函數(shù)可以設(shè)置任意數(shù)量的參數(shù)闽烙，這些參數(shù)可以是字符串也可以是對(duì)象。如果參數(shù)的值是fasly声搁，那么它就不會(huì)被輸出.
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'
