React-classnames库
分类：React作者：编程之家用户
今天在项目中看到了大佬引入了classnames,之前没用过所以去搜了搜，感觉还真的是挺好用的，搜到一篇很不错的文章，跟原创作者交流了一下就转载过来了！
下面废话不多说，我们直接来看文章吧
首先我们我们来看这个名字classnames一看就知道是跟className类名有关的，实际上也确实是这样，
那我们为什么要用这个呢
由于react原生动态添加多个className会报错
import style from
<div className={style.class1 style.class2}
想要得到最终渲染的效果是：
引入classnames库，安装：
使用：
import classnames from '
'
<div className=<span style="color: #000000">classnames({
<span style="color: #008000">'class1': true,'class2': true<span style="color: #000000">
)>
classNames('foo','bar');
'foo bar'
classNames('foo',{ bar: }); 'foo bar'
classNames({ 'foo-bar': }); 'foo-bar'
classNames({ 'foo-bar': }); ''
classNames({ foo: },{ bar: }); 'foo bar'
classNames({ foo: ,bar: }); 'foo bar'
<span style="color: #008000">//
<span style="color: #008000"> lots of arguments of various types
classNames('foo',{ bar: <span style="color: #0000ff">true,duck: <span style="color: #0000ff">false },'baz',{ quux: <span style="color: #0000ff">true }); <span style="color: #008000">//<span style="color: #008000"> => 'foo bar baz quux'
<span style="color: #008000">//
<span style="color: #008000"> other falsy values are just ignored
classNames(<span style="color: #0000ff">null,<span style="color: #0000ff">false,'bar',undefined,1,{ baz: <span style="color: #0000ff">null },''); <span style="color: #008000">//<span style="color: #008000"> => 'bar 1'
classNames = require('classnames'<span style="color: #0000ff">var Button =<span style="color: #000000"> React.createClass({
<span style="color: #008000">//<span style="color: #008000"> ...
<span style="color: #000000"> render () {
<span style="color: #0000ff">var btnClass =<span style="color: #000000"> classNames({
btn: <span style="color: #0000ff">true<span style="color: #000000">,'btn-pressed': <span style="color: #0000ff">this<span style="color: #000000">.state.isPressed,'btn-over': !<span style="color: #0000ff">this.state.isPressed && <span style="color: #0000ff">this<span style="color: #000000">.state.isHovered
});
<span style="color: #0000ff">return
;
<span style="color: #000000"> }
});
