classnames可以非常简单的进行class 赋值
npm介绍的用法使用方法
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'
单个class
classNames({'youclass':false}); // => ''
classNames({'youclass':true}); // => 'youclass'
多个class
classNames({'youclass':true},{'youclass2':true}); // => 'youclass' 'youclass2'
应用在React中
import styles from './index.css'
const judge = false
...
return(
<div className={classnames(styles.layout, { [styles.layout2]: judge }>
</div>
)
后记
非常好用👌
