首页 > 其他分享 >你可能不需要 classnames或者clsx

你可能不需要 classnames或者clsx

时间:2023-08-08 20:46:46浏览次数:33  
标签:bar 或者 clsx classNames classnames foo true 类名

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

相关文章