你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。
    考虑如下代码：

    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 显示什么内容，当 isLoggedIn 为 true 时 显示 「已登录」，反之显示「未登录」。
    声明变量并使用 if 语句是条件渲染组件的不错的方式，但有时你也想使用更简洁的语法，在 JSX 中有如下几种方法。