React 條件渲染: 與js中的寫法一致
注意：在 JavaScript 中，true && expression?總是返回?expression，而?false && expression?總是返回?false。
因此，如果條件是?true，&&?右側的元素就會被渲染，如果是?false，React 會忽略并跳過它。
1. if 或條件運算符來創建表示當前狀態的元素
示例一：if (isLoggedIn) {button = <LogoutButton onClick={this.handleLogoutClick} />;} else {button = <LoginButton onClick={this.handleLoginClick} />;}
2. 在JSX中嵌入表達式使用花括號{}
示例一：
function Mailbox(props) {const unreadMessages = props.unreadMessages;return (<div><h1>Hello!</h1>{unreadMessages.length > 0 &&<h2>您有 {unreadMessages.length} 條未讀信息。</h2>}</div>);
}
3.三目運算符 condition ? true : false。
4.阻止組件渲染 結合變量的boolean值和if進行判斷
示例一：
function WarningBanner(props) {if (!props.warn) {//warn為存儲在state中的可變變量return null;}return (<div className="warning">警告!</div>);
}
)
