條件渲染

在 Taro 中，你可以創(chuàng)建不同的組件來(lái)封裝各種你需要的行為。然后還可以根據(jù)應(yīng)用的狀態(tài)變化只渲染其中的一部分。

Taro 中的條件渲染和 JavaScript 中的一致，使用 Taro 操作符 if 或條件運(yùn)算符來(lái)創(chuàng)建表示當(dāng)前狀態(tài)的元素，然后讓 Taro 根據(jù)它們來(lái)更新 UI。

元素變量

你可以使用變量來(lái)儲(chǔ)存元素。它可以幫助你有條件的渲染組件的一部分，而輸出的其他部分不會(huì)更改。

考慮如下代碼：

// LoginStatus.js
class LoginStatus extends Component {
  render () {
    const isLoggedIn = this.props.isLoggedIn
    // 這里最好初始化聲明為 `null`，初始化又不賦值的話
    // 小程序可能會(huì)報(bào)警為變量為 undefined
    let status = null
    if (isLoggedIn) {
      status = <Text>已登錄</Text>
    } else {
      status = <Text>未登錄</Text>
    }

    return (
      <View>
        {status}
      </View>
    )
  }
}
// app.js
import LoginStatus from './LoginStatus'

// 這樣會(huì)渲染 `已登錄`
class App extends Component {
  render () {
    return (
      <View>
        <LoginStatus isLoggedIn={true} />
      </View>
    )
  }
}

在以上代碼中，我們通過(guò) isLoggedIn 作為參數(shù)來(lái)判定 status 顯示什么內(nèi)容，當(dāng) isLoggedIn 為 true 時(shí) 顯示 「已登錄」，反之顯示「未登錄」。

聲明變量并使用 if 語(yǔ)句是條件渲染組件的不錯(cuò)的方式，但有時(shí)你也想使用更簡(jiǎn)潔的語(yǔ)法，在 JSX 中有如下幾種方法。

邏輯運(yùn)算符 &&

你可以通過(guò)用花括號(hào)包裹代碼在 JSX 中嵌入幾乎任何表達(dá)式 ，也包括 JavaScript 的邏輯與 &&，它可以方便地條件渲染一個(gè)元素。

class LoginStatus extends Component {
  render () {
    const isLoggedIn = this.props.isLoggedIn

    return (
      <View>
        {isLoggedIn && <Text>已登錄</Text>}
        {!isLoggedIn && <Text>未登錄</Text>}
      </View>
    )
  }
}

以上代碼和 元素變量 部分代碼達(dá)成的效果是一樣的。之所以能這樣做，是因?yàn)樵?JavaScript 中，true && expression 總是返回 expression，而 false && expression 總是返回 false。

因此，如果條件是 true，&& 右側(cè)的元素就會(huì)被渲染，如果是 false，Taro 會(huì)忽略并跳過(guò)它。

三元運(yùn)算符（條件表達(dá)式）

條件渲染的另一種方法是使用 JavaScript 的條件運(yùn)算符 condition ? true : false。

class LoginStatus extends Component {
  render () {
    const isLoggedIn = this.props.isLoggedIn

    return (
      <View>
      {isLoggedIn
        ? <Text>已登錄</Text>
        : <Text>未登錄</Text>
      }
      </View>
    )
  }
}

以上代碼和之前的兩種方法達(dá)成的效果也是一致的。

在 JSX 條件渲染的模式和 JavaScript 差不多，你可以根據(jù)團(tuán)隊(duì)的習(xí)慣選擇更易讀的方式。但當(dāng)條件變得過(guò)于復(fù)雜，可能就是提取元素抽象成組件的好時(shí)機(jī)了。

枚舉條件渲染

有時(shí)渲染的條件非常多，不管是 if-else 還是 switch-case 來(lái)做條件渲染都會(huì)顯得太麻煩。這時(shí)我們可以使用「表驅(qū)動(dòng)法」：枚舉渲染。

function Loading (props) {
  const { loadingText, LOADING_STATUS, loadingStatus, onRetry } = props
  return (
    <View className='loading-status'>
      {
        {
          'loading': loadingText,
          'fail': <View onClick={onRetry}> 加載失敗, 點(diǎn)擊重試 </View>,
          'no-more': '沒(méi)有更多了'
        }[loadingStatus] /** loadingStatus 是 `loading`、`fail`、`no-more`  其中一種狀態(tài) **/
      }
    </View>
  )
}