React学习之条件渲染

说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-07文件夹下。

条件渲染

在React中，我们可以根据不同的需求来创建不同的组件，有时候在一些特定的场景中，我们需要呈现不同的状态，这个时候我们就可以利用条件渲染来完成这个需求。React中的条件渲染和JavaScript中一样，使用if运算或者条件运算符创建元素表示当前的状态，然后可以根据这些条件运算来更新UI。

这里列举一个登录的例子，例如有如下组件：

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <h1>欢迎回来</h1>
    }

    return <h1>请登录</h1> 
}

当向组件传递的isLoggedIn值为真时，表示登录状态，这个时候<h1>欢迎回来</h1>就会被渲染出来，反之，当为退出状态时，<h1>请登录</h1>就会被渲染出来。

当然，这里除了使用if来判断，也可使用三目运算符来进行条件渲染：

function Greeting(props) {
    retu