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>
);
}
网友评论