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

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

元素變量

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

考慮如下代碼：

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

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

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

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

聲明變量并使用 if 語句是條件渲染組件的不錯的方式，但有時你也想使用更簡潔的語法，在 JSX 中有如下幾種方法。

邏輯運算符 &&

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

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

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

以上代碼和 元素變量 部分代碼達成的效果是一樣的。之所以能這樣做，是因為在 JavaScript 中，true && expression 總是返回 expression，而 false && expression 總是返回 false。

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

三元運算符（條件表達式）

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

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

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

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

在 JSX 條件渲染的模式和 JavaScript 差不多，你可以根據(jù)團隊的習慣選擇更易讀的方式。但當條件變得過于復雜，可能就是提取元素抽象成組件的好時機了。

枚舉條件渲染

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

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