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

2021-09-11 10:01:42 字數 2009 閱讀 1370

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

資料為空, 空頁面 取資料時發生錯誤, 錯誤頁面 資料正常 載入狀態 針對以上三種情況, 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 ()

複製**

上面是簡單的render元件, 使用起來是這樣的

class

list

extends

component

render () = this.props

return (

if= >

載入狀態

render>

if= >

錯誤狀態

render>

if= >

成功狀態

render>

if= >

空狀態render>

div>

) }}

複製**

相比使用在render裡使用大量的if/else 上面的寫法無疑更加清楚明了了. 如果所有列表業務元件統一起來, 狀態保持一致, 我們可以做更高層次的抽象, 把其他狀態都抽象到乙個高階函式之中, 我們寫**的時候只要確保success的狀態能正確渲染即可

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