react jsx 中的条件判断

时间 2019-11-20

标签 react jsx 条件判断栏目 React 繁體版

原文原文链接

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

react jsx 中的条件判断

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

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

可是,上面的代码在react中是错误的函数

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

使用三目运算符

...
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>
}
...

使用函数

只须要改变一下上面的方法.net

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

使用&&运算符

若是isComplete为true,&&后面的就会被使用code

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