classnames，React动态绑定className

要说到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'