1.与运算符&&

function Mailbox(props){
    const unreadMessages = props.unreadMessages;
    return(
        <div>
            {unreadMessages.legth >0 &&
                <h2>
                    You have {unreadMessages.length} unread message.
                </h2>
            }
        </div>
    );
}

const messages = ['react', 're:react', "re:re:react"];
ReactDOM.render(
    <Mailbox unreadMessages={messages} />
    document.getElementById('root')
);

运行结果如下：

true && expression 总是返回expression，而 false && expression 总是返回false。
因此，如果条件时true，&&右侧的元素就会别渲染，如果是false，React会忽略并跳过它。

2.三目运算符

condition ? true : false

render(){
    const isLoggedIn = this.state.isLoggedIn;
    return(
        <div>
            The use is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
        </div>
    );
}

render(){
    const isLoggedIn = this.state.isLoggedIn;
    return(
        <div>
        {isLoggedIn ? (
            <LogoutButton onClck={this.handleLogoutClick} />
        ) : (
            <LoginButton onClck={this.handleLoginClick} />
        )}
        </div>
    );
}