React 的幾種條件渲染以及選擇

對於乙個展示頁面來講, 通常有好幾種展示狀態(以列表頁為例):

資料為空, 空頁面 取資料時發生錯誤, 錯誤頁面 資料正常 載入狀態 針對以上三種情況, react渲染列表的時候要正確判斷並渲染出相應的檢視, 也就是條件渲染. 不同於vue的v-if, v-show等框架提供的api, react的條件渲染都是js原生的再加上一點點的hack. 比如react文件提到的. if/else, && 和三目等等.

當然上面的都是常用的一些方法, 但是也存在著各種問題, 比如條件分支過多的的事時候**也會越來越亂. 下面提供幾種具有普適性的方法

這三個方法都是官方文件提到的, 這裡就放到一起了, 其實這三種方案都是類似的: 在render生命週期裡做相應的判斷. 不過三目和短路運算子可以在jsx行內使用.

class

list
extends
component
render ()  = this.props
if (status === 'loading')  
if (status === 'error') 
if (status === 'success') 
if (status === 'empty') 
}}複製**

這裡的render當然不是生命週期裡的render, 我們可以跟vue裡的v-if對應起來

function

render () 
複製**

class

list
extends
component
render ()   = this.props
return (
if= >
載入狀態
render>
if= >
錯誤狀態
render>
if= >
成功狀態
render>
if= >
空狀態render>
div>
)	}}
複製**

jsx裡是可以寫變數, 同時立即執行函式也是可以的

class

list
extends
component
render ()   = this.props
return (
})()}
div>)}}
複製**

對於高階元件的概念就不做贅述了, 我們把條件渲染的邏輯放到高階元件中, 除了邏輯的抽象外, 也可以提高元件的復用率.

return

class

ppextends

component

= this.props

switch (status) }}}

複製**

如果我們可以保證所有列表的props一致(也就是都使用status判斷狀態), 我們完全可以專注的寫status為success的狀態:

@withlist

class
list
extends
component
render () 
}複製**

參考: blog.logrocket.com/conditional…

React 的幾種條件渲染以及選擇

對於乙個展示頁面來講,通常有好幾種展示狀態 以列表頁為例 資料為空,空頁面 取資料時發生錯誤,錯誤頁面 資料正常 載入狀態 針對以上三種情況,react渲染列表的時候要正確判斷並渲染出相應的檢視,也就是條件渲染.不同於vue的v if,v show等框架提供的api,react的條件渲染都是js原生...

React條件渲染

在乙個新的元件內根據不同的條件返回不同內容的元件 function greeting props return 將元素存入乙個變數，作為變數表示式再渲染 let button null if isloggedin else 當條件滿足再渲染，true expression總是會返回expressio...

react條件列表渲染

條件渲染 1.條件判斷 constructor props render else return 封裝到函式中 constructor props render gettitlejsx else return titlejsx 2.三元運算子class extends react.component...