React通过classnames库添加类

React添加Class的方式

在vue中添加class是一件非常简单的事情:

你可以通过传入一个对象, 通过布尔值决定是否添加类:

<button:class="{ active: isFlag, aaa: true}">按钮</button>

你也可以传入一个数组:

<!-- 1.基本使用 --><h2:class="['aaa', 'bbb']">Hello Vue</h2><!-- 2.数组中存放变量 --><h2:class="[className1, className2]">Hello Vue</h2>

甚至是对象和数组混合使用:

<!-- 数组中放一个对象语法 --><h2:class="['aaa', { active: isFlag }]">Hello Vue </h2>

而在React中就相对繁琐了, React在JSX给了我们开发者足够多的灵活性，你可以像编写JavaScript代码一样，通过一些逻辑来决定是否添加某些class:

例如用三元运算符判断是否添加类

<h2 className={`'title' ${isActive ?'active':''}`}>我是标题</h2>

或者将要添加的类放在一个数组中, 在让数组中的元素使用空格连接

<h2 className={['title', (isActive ? 'active' : '')].join(' ')}>我是标题</h2>

当时如果是简单的类, 判断一个类是否添加还是比较容易, 如果需要判断多个, 处理起来就显得比较麻烦, 并且代码的可读性也会显得不友好

这个时候我们可以借助于一个第三方的库:classnames

很明显，这是一个用于动态添加classnames的一个库。

首先需要安装classnames库:

npm i classnames

classNames 是一个函数, 这个函数接受任意数量的参数，可以是字符串或对象

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 barclassNames('foo',{bar:true,duck:false},'baz',{quux:true});// => 'foo bar baz quux'classNames(null,false,'bar',undefined,0,1,{baz:null},'');// => 'bar 1'

示例代码

render(){const{ isActive }=this.state

  return(<div>{/* 传入两个字符串, 表示绑定两个class */}<h2 className={classNames("aaa","bbb")}>标题</h2>{/* 明确绑定aaa类, 根据变量的布尔值决定是否绑定bbb */}<h2 className={classNames("aaa",{bbb: isActive})}>标题</h2>{/* js是无法识别短横线的, 如果是短横线连接的类名, 需要用引号包裹 */}<h2 className={classNames({"aaa-bbb": isActive })}>标题</h2>{/* 有多个不确定是否添加的类名, 可以使用多个对象 */}<h2 className={classNames({aaa: isActive},{bbb: isActive})}>标题</h2>{/* 也可以写在一个对象中 */}<h2 className={classNames({aaa: isActive,bbb: isActive})}>标题</h2>{/* 和vue一样, 也是支持数据的写法, 以及数组和对象的混合写法 */}<h2 className={classNames(["aaa","ccc"])}>标题</h2><h2 className={classNames(["aaa",{bbb: isActive}])}>标题</h2></div>)}