技术控

    今日:57| 主题:49101
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] [NMM #2] Dynamic React className – the way to achieve it

[复制链接]
情不自禁的想你 发表于 2016-9-30 13:29:29
97 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Today is the last day of the month. This means that this is the last time to publish a post from the “NPM module of the month” series… This time I will show you a very helpful library which I use in almost every    Reactcomponent. It is just called    classnamesand it is, in my opinion, the best way to achieve    dynamic React classNamevalues.  
  Let’s see how we can use it!
  Installation and usage

  Before I show you how “classnames” helps in working with dynamic React className values, let’s shortly take a look at how to install it. It’s pretty simple obviously:
  1. npm install classnames
复制代码
I’m sure all of you expected this, didn’t you? :wink: Now, you can import (or require) it in your project and just use it. Ok, but how can we use the “classnames” library?
  This is also actually straightforward. Please see the example below for using the “classnames” library (from the README of the project):
  1. import classNames from 'classnames';

  2. classNames('foo', 'bar'); // => 'foo bar'
  3. classNames('foo', { bar: true }); // => 'foo bar'
  4. classNames({ 'foo-bar': true }); // => 'foo-bar'
  5. classNames({ 'foo-bar': false }); // => ''
  6. classNames({ foo: true }, { bar: true }); // => 'foo bar'
  7. classNames({ foo: true, bar: true }); // => 'foo bar'

  8. // lots of arguments of various types
  9. classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

  10. // other falsy values are just ignored
  11. classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
复制代码
As you can see, the    classNamesmethod which is imported in the first line gets strings and/or objects as the parameters. If you pass only string params, it just concatenates them by placing an empty space between them.  
  The second, and more interesting, way of using it is to pass an object as a parameter. The properties of this object should be set to the boolean value. If you set the value to    trueit will return the string with the name of the property. If it is    falseit will instead omit this property in the string. As a result we get a string with every    trueproperty concatenated. Simple, right?  
  How “classnames” helps in dynamic React className

  Ok. So now, how can we use it to deal with dynamic React className values? Please take a look at the sample implementation of the    rendermethod of a React component:  
  1. import classNames from 'classnames';

  2. ...

  3. render() {
  4.   const elementClass = classNames({
  5.     'content': true,
  6.     'content-specific': this.state.contentSpecific
  7.   });
  8.   
  9.   return (
  10.     <div className={elementClass}>
  11.       ...
  12.     </div>
  13.   );
  14. }
复制代码
In the above code we used the    classNamesfunction to prepare the class string for the returned    divelement. Please note that the    content-specificproperty of the object passed to the    classNamesfunction depends on the components state value. If the    contentSpecificstate property is set to    true, the    content-specificproperty name is added to the returned string. Otherwise it isn’t.  
  Summary

  I think the “classnames” library is very helpful in creating dynamic React className values. I almost always use it in my React components and I wonder what you think about it? Do you know it?
友荐云推荐




上一篇:机器翻译十大经典论文
下一篇:BigQuery: introducing powerful new enterprise data warehousing features
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

雷笑一 发表于 2016-9-30 14:30:16
OMG!介是啥东东!!!
回复 支持 反对

使用道具 举报

wqpsb 发表于 2016-9-30 14:46:06
一语道尽爱情的残忍。情到深处人孤。疾苦使人成熟,强项的人会感悟爱的真谛,而懦弱的人徒生怅恨。
回复 支持 反对

使用道具 举报

◆◇▁起嚸℡ 发表于 2016-10-15 14:00:25
上火,就容易缺经验,过去,我一直缺, 自从学会复制粘贴以后,我的经验小康了 ,一口气拿五点,不费劲儿,复制一次粘 贴无数次,真实惠
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表