在 Taro 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。
Taro 中的条件渲染和 JavaScript 中的一致，使用 Taro 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 Taro 根据它们来更新 UI。
#元素变量
你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。
考虑如下代码：
class LoginStatus extends Component {
render () {
const isLoggedIn = this.props.isLoggedIn
let status = null
if (isLoggedIn) {
status = <Text>已登录</Text>
} else {
status = <Text>未登录</Text>
}
return (
<View>
{status}
</View>
)
}
}
import LoginStatus from './LoginStatus'
class App extends Component {
render () {
return (
<View>
<LoginStatus isLoggedIn={true} />
</View>
)
}
}
在以上代码中，我们通过 isLoggedIn 作为参数来判定 status 显示什么内容，当 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，&& 右侧的元素就会被渲染，如果是 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 差不多，你可以根据团队的习惯选择更易读的方式。但当条件变得过于复杂，可能就是提取元素抽象成组件的好时机了。
#枚举条件渲染
有时渲染的条件非常多，不管是 if-else 还是 switch-case 来做条件渲染都会显得太麻烦。这时我们可以使用「表驱动法」：枚举渲染。
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]
}
</View>
)
}