与运算符&& ,三目运算符

1.与运算符&&

function Mailbox(props){
    const unreadMessages = props.unreadMessages;
    return(
        

            {unreadMessages.legth >0 &&
                

                    You have {unreadMessages.length} unread message.
                
            }
        
    );
}

const messages = ['react', 're:react', "re:re:react"];
ReactDOM.render(
    
    document.getElementById('root')
);

运行结果如下：

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

2.三目运算符

condition ? true : false

render(){
    const isLoggedIn = this.state.isLoggedIn;
    return(
        

            The use is {isLoggedIn ? 'currently' : 'not'} logged in.
        
    );
}

render(){
    const isLoggedIn = this.state.isLoggedIn;
    return(
        

        {isLoggedIn ? (
            
        ) : (
            
        )}
        
    );
}