render方法中如何使用if else 判断

学RN的同学知道,在组件的render方法中我们可以通过JSX来定义组件的具体布局和显示( JSX 用于在 JavaScript 中定义页面视图结构,它采用层层嵌套的语法组织页面。)并且我们可以在 JSX 中写 JavaScript,则需要将 JS 代码包在一个中括号里面。但如果我们的组件比较复杂,需要根据不同的条件设置不同的样式,比如我们的组件有个bottomView,如果它的状态是可操作的,那么我们底部就显示操作按钮,否则就用文本组件显示异常报错。如果直接使用if else判断是不可以的。但是可以使用三目运算,比如:

错误示范:

if(this.props.canHandle) {

} else {

}

正确示范:

{this.props.canHandle ? : }

上面是一种 方式,但三目运算也只能判断条件是与否,如果过于复杂的判断,比如bottomView可能会有多种不同的方式布局,我们需要用if else if esle if .. else这样的判断该怎么办呢?前面我们讲过可以在JSX中插入js,那么我们可以将这些判断放在js方法中,然后return我们判断好的组件就行了,比如


{this._renderBottom()}

_renderBottom() {
if(this.props.type === 1){
return alaa
} else if (this.props.type === 2){
return
} else if (...) else{..}
}

参考链接:(https://stackoverflow.com/questions/40477245/is-it-possible-to-use-if-else-statement-in-react-render-function)
(https://facebook.github.io/react/docs/conditional-rendering.html)

你可能感兴趣的:(render方法中如何使用if else 判断)