對(duì)于一個(gè)展示頁(yè)面來(lái)講, 通常有好幾種展示狀態(tài)(以列表頁(yè)為例):

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的昭陽(yáng)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

• 數(shù)據(jù)為空, 空頁(yè)面
• 取數(shù)據(jù)時(shí)發(fā)生錯(cuò)誤, 錯(cuò)誤頁(yè)面
• 數(shù)據(jù)正常
• 加載狀態(tài)

針對(duì)以上三種情況, react渲染列表的時(shí)候要正確判斷并渲染出相應(yīng)的視圖, 也就是條件渲染. 不同于vue的v-if, v-show等框架提供的api, react的條件渲染都是js原生的再加上一點(diǎn)點(diǎn)的hack. 比如react文檔提到的. if/else, && 和三目等等.

當(dāng)然上面的都是常用的一些方法, 但是也存在著各種問(wèn)題, 比如條件分支過(guò)多的的事時(shí)候代碼也會(huì)越來(lái)越亂. 下面提供幾種具有普適性的方法

if/else, 三目以及 短路運(yùn)算符

這三個(gè)方法都是官方文檔提到的, 這里就放到一起了, 其實(shí)這三種方案都是類似的: 在render生命周期里做相應(yīng)的判斷. 不過(guò)三目和短路運(yùn)算符可以在jsx行內(nèi)使用.

if/else

class List extends Component {
 static propTypes = {
  status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
 }
 
 render () {
  const { status } = this.props
  if (status === 'loading') {
   return 

    加載狀態(tài)
   
  } 
  
  if (status === 'error') {
   return 

    錯(cuò)誤狀態(tài)
   
  }


  if (status === 'success') {
   return 

    成功狀態(tài)
   
  }

  if (status === 'empty') {
   return 

    空狀態(tài)
   
  }
 }
}

分享標(biāo)題：詳解React的幾種條件渲染以及選擇-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/ddjsji.html