请选择 进入手机版 | 继续访问电脑版

技术控

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

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

[复制链接]
情不自禁的想你 发表于 2016-9-30 13:29:29
132 3
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?
雷笑一 发表于 2016-9-30 14:30:16
OMG!介是啥东东!!!
回复 支持 反对

使用道具 举报

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

使用道具 举报

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

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表