JSX表達式中可以使用&&來達到if語句的效果：
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
若要在JSX中達到if...else效果蟆淀，可以使用if三元表達式
expression?statement1:statement2
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
又如：
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
為了阻止一個組件繪制，直接返回null即可燃逻。
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
React中如何處理表單郑兴？
好蚕捉，這一節(jié)就到這里薪前。后續(xù)我將介紹更多React技術細節(jié)润努，來慢慢解答上述問題。
想學計算機技術嗎示括？需要1對1專業(yè)級導師指導嗎铺浇？想要團隊陪你一起進步嗎?歡迎加我為好友！微信號：iTekka例诀。
