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

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

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

if/else, 三目以及 短路運算符

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

if/else

class List extends Component { static propTypes = {  status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) }  render () {  const { status } = this.props  if (status === 'loading') {   return <div>    加載狀態   </div>  }     if (status === 'error') {   return <div>    錯誤狀態   </div>  }  if (status === 'success') {   return <div>    成功狀態   </div>  }  if (status === 'empty') {   return <div>    空狀態   </div>  } }}

可以看到這種寫法勝在清楚明了, 但是如果判斷分支越來越多代碼無可避免的會非常冗余, 同時復用性也堪憂.

Render(IF)組件

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

function Render ({ if: cond, children }) {  return cond ? children : null}

上面是簡單的Render組件, 使用起來是這樣的

class List extends Component {  static propTypes = {    status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])  }   render () {  const { status } = this.props  return (   <div>    <Render if={status === 'loading'} >     加載狀態    </Render>    <Render if={status === 'error'} >     錯誤狀態    </Render>    <Render if={status === 'success'} >     成功狀態    </Render>    <Render if={status === 'empty'} >     空狀態    </Render>   </div>  )  }}

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

立即執行函數

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

class List extends Component { static propTypes = {   status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) }  render () {  const { status } = this.props  return (   <div>    {(() => {     switch (status) {      case 'loading':       return <div>加載狀態</div>            case 'error':       return <div>錯誤狀態</div>            case 'success':       return <div>成功狀態</div>            case 'empty':       return <div>空狀態</div>     }    })()}   </div>  ) }}