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的情况
标签:bar,或者,clsx,classNames,classnames,foo,true,类名 From: https://www.cnblogs.com/lvhw/p/17615316.html