006|React之條件渲染

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中如何處理表單？

好，這一節就到這裡。後續我將介紹更多React技術細節，來慢慢解答上述問題。

想學計算機技術嗎？需要1對1專業級導師指導嗎？想要團隊陪你一起進步嗎?歡迎加我為好友！微訊號：iTekka。