classnames

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

后记

非常好用👌