react jsx 中的條件判斷

想知道怎麼拓展<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>
}
...