React
发布时间:2019-10-13 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了React-classnames库,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
今天在项目中看到了大佬引入了classnames,之前没用过所以去搜了搜,感觉还真的是挺好用的,搜到一篇很不错的文章,跟原创作者交流了一下就转载过来了!
下面废话不多说,我们直接来看文章吧
首先我们我们来看这个名字classnames一看就知道是跟className类名有关的,实际上也确实是这样,
那我们为什么要用这个呢
由于react原生动态添加多个className会报错
import style from
<div className={style.class1 style.class2}
想要得到最终渲染的效果是:
引入classnames库,安装:
BACkground-color: #ffffff; color: #993300">npm install classnames --save
使用:
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': false }); ''
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"> }
}
);