你可能不需要 classnames或者clsx

classnames是一个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'

但是这样用通常会比较麻烦，如果用es6的模板字符串，其实也可以完成同样的功能。

`foo bar` // => 'foo bar', not that exciting
`foo ${ true ? 'bar': '' }`; // => 'foo bar'
`${true ? 'foo-bar': '' }`; // => 'foo-bar'
`${ false ? 'foo-bar' : ''}` // => ''
`${ true? 'foo': '' } ${ true ? 'bar': '' }`; // => 'foo bar'

对于多个类名还可以通过数组连接：

const componentClassName = [
  'some-base-class',
  someBooleanCondition && 'a-class-in-here',
  someOtherBoolean && 'another-class',
]
  .filter(Boolean)
  .join(' ')

 

后面2种写法可以替换掉大部分使用classnames的情况