react jsx 中的条件判断

为什么80%的码农都做不了架构师？>>>   

想知道怎么拓展<if>标签的, 请看我另一篇文章
http://my.oschina.net/wolfx/blog/707181

react jsx 中的条件判断

说到条件判断,很容易想到的就是if,有很多模版引擎都是这样处理的.

<div className={if(isComplete){"isComplete"}}>...</div>

但是,上面的代码在react中是错误的

解决办法有一下4种 1.使用三目运算符 2.设置变量,在属性中引用它 3.用函数处理 4.使用&&运算

使用三目运算符

...
render:function(){
    return <div className={
        this.state.isComplete ? "isComplete" : ""
    }>...</div>
}
...

使用变量

...
getIsComplete:function(){
    return this.state.isComplete ? "isComplete" : "";
},
render:function(){
    var isComplete = this.getIsComplete();
    return <div className={isComplete}>...</div>
}
...

使用函数

只需要改变一下上面的方法

getIsComplete:function(){
    return this.state.isComplete ? "isComplete" : "";
},
render:function(){
    return <div className={this.getIsComplete()}>...</div>
}

使用&&运算符

如果isComplete为true,&&后面的就会被使用

...
render:function(){
    return <div className={this.state.isComplete && "isComplete"}>...</div>
}
...

转载于:https://my.oschina.net/wolfx/blog/625337