一個簡單的JavaScript實(shí)用程序蝗敢,用于有條件地連接類名捷泞。
- 安裝
npm install classnames
- 用法
classNames函數(shù)接受任意數(shù)量的參數(shù),可以是字符串或?qū)ο笫偾础?shù)“foo”是{foo: true}的縮寫锁右。如果與給定鍵相關(guān)聯(lián)的值是false,則該鍵將不包含在輸出中讶泰。
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'
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
如果你在一個支持計(jì)算鍵的環(huán)境中(在ES2015和Babel中可用)咏瑟,你可以使用動態(tài)類名:
let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });