classnames 一个简单的JavaScript实用程序,用于有条件地连接类名

一个简单的JavaScript实用程序,用于有条件地连接类名。

  • 安装
npm install classnames
  • 用法
    classNames函数接受任意数量的参数,可以是字符串或对象。参数“foo”是{foo: true}的缩写。如果与给定键相关联的值是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'

如果你在一个支持计算键的环境中(在ES2015和Babel中可用),你可以使用动态类名:

  let buttonType = 'primary';
  classNames({ [`btn-${buttonType}`]: true });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,253评论 19 139
  • 我曾经看到一篇文章说,其实现在的单页面应用已经有向feature-flag编程发展的倾向了.什么意思呢? 和鸿门宴...
    smartphp阅读 28,680评论 3 31
  • 本章假设你已经有了JSX经验,你希望提高自己的技能去高效地使用它。要想使用JSX,没有任何问题或不被期望的行为,理...
    米诺zuo阅读 2,143评论 1 0
  • Spring Cloud Config 目录 快速开始客户端使用 Spring Cloud Config服务器环境...
    dinel阅读 498评论 0 0
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,624评论 28 53