title: 条件渲染

在 Taro 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

Taro 中的条件渲染和 JavaScript 中的一致,使用 Taro 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 Taro 根据它们来更新 UI。

元素变量

你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分,而输出的其他部分不会更改。

考虑如下代码:

  1. // LoginStatus.js
  2. class LoginStatus extends Component {
  3. render () {
  4. const isLoggedIn = this.props.isLoggedIn
  5. // 这里最好初始化声明为 `null`,初始化又不赋值的话
  6. // 小程序可能会报警为变量为 undefined
  7. let status = null
  8. if (isLoggedIn) {
  9. status = <Text>已登录</Text>
  10. } else {
  11. status = <Text>未登录</Text>
  12. }
  13. return (
  14. <View>
  15. {status}
  16. </View>
  17. )
  18. }
  19. }
  20. // app.js
  21. import LoginStatus from './LoginStatus'
  22. // 这样会渲染 `已登录`
  23. class App extends Component {
  24. render () {
  25. return (
  26. <View>
  27. <LoginStatus isLoggedIn={true} />
  28. </View>
  29. )
  30. }
  31. }

在以上代码中,我们通过 isLoggedIn 作为参数来判定 status 显示什么内容,当 isLoggedIntrue 时 显示 「已登录」,反之显示「未登录」。

声明变量并使用 if 语句是条件渲染组件的不错的方式,但有时你也想使用更简洁的语法,在 JSX 中有如下几种方法。

逻辑运算符 &&

你可以通过用花括号包裹代码在 JSX 中嵌入几乎任何表达式 ,也包括 JavaScript 的逻辑与 &&,它可以方便地条件渲染一个元素。

  1. class LoginStatus extends Component {
  2. render () {
  3. const isLoggedIn = this.props.isLoggedIn
  4. return (
  5. <View>
  6. {isLoggedIn && <Text>已登录</Text>}
  7. {!isLoggedIn && <Text>未登录</Text>}
  8. </View>
  9. )
  10. }
  11. }

以上代码和 元素变量 部分代码达成的效果是一样的。之所以能这样做,是因为在 JavaScript 中,true && expression 总是返回 expression,而 false && expression 总是返回 false。

因此,如果条件是 true,&& 右侧的元素就会被渲染,如果是 false,Taro 会忽略并跳过它。

三元运算符(条件表达式)

条件渲染的另一种方法是使用 JavaScript 的条件运算符 condition ? true : false

  1. class LoginStatus extends Component {
  2. render () {
  3. const isLoggedIn = this.props.isLoggedIn
  4. return (
  5. <View>
  6. {isLoggedIn
  7. ? <Text>已登录</Text>
  8. : <Text>未登录</Text>
  9. }
  10. </View>
  11. )
  12. }
  13. }

以上代码和之前的两种方法达成的效果也是一致的。

在 JSX 条件渲染的模式和 JavaScript 差不多,你可以根据团队的习惯选择更易读的方式。但当条件变得过于复杂,可能就是提取元素抽象成组件的好时机了。