react 条件渲染

有时候我们需要根据条件来决定是否渲染一个组件，那么我们会怎么写呢？

1. 用if判断条件，然后return 不同的值

function Greeting(props) {
    if (props.isLoggedIn) {
        return <UserGreeting/>;
    } else {
        return <GuestGreeting/>
    }
}

2.用&& ||逻辑运算符来代替简单的if/else语句

function Greeting(props) {
    return props.isLoggedIn && <UserGreeting/> || <GuestGreeting/>;
}

3.用三目运算符来代替简单的if/else语句

function Greeting(props) {
    return props.isLoggedIn ? <UserGreeting/> : <GuestGreeting/>;
}

可以看到 && || 其实是和 三目运算符差不多的。