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>
);
}
