要说到
react
绑定className
,先要了解为何react
用的是className
,不像其它语言都是用class
?这是因为class
是JavaScript
中的保留关键字,而JSX
是JavaScript
的扩展。这就是React
不使用class
而使用className
的主要原因
常规的绑定
<div className="title">标题</div>
动态绑定className
如果需要根据state
值addColor
来判断是否添加color
,需要如下写法(两种)。
//ES6 模板字符串
<p className={`title ${this.state.addColor?'color':null}`}>标题</p>
//join("")
<p className={['title',this.state.addColor?'color':null].join(' ')}>标题</p>
接下来推荐一种目前比较主流的动态绑定className
的工具。它就是classnames
。
下载方式
npm install classnames
使用
<p className={classnames({
title:true,
color:this.state.addColor
})}>标题</p>
classnames
的写法是比较直观的,可以对传入的class
进行比较明显的动态判断,除了以上这种写法,classnames
还可以支持以下多种写法:
//基础用法
classnames('bold','center') // => 'bold center'
classnames('bold',{'center':true}) // => 'bold center'
classnames('bold',{'center':false}) // => 'bold'
//各种各样属性结合
classnames('bold',{'center':true,'break':false},{'color':true}) // => 'bold center color'
// 一些不存在/空的属性会自动忽略
classNames(null, false, 'bold', undefined, 0, 1, { baz: null }, ''); // => 'bold 1'
//数组会遍历输出
let classnamesArr = [{'center':true,'break':false},'title'];
classnames('bold',classnamesArr); // => 'bold center title'
//字符串模板方式
let fontStyle = 'weight';
classnames(`font-${fontStyle}`); // => 'font-weight'
classnames({[`font-${fontStyle}`]:true}); // => 'font-weight'