在前面元件以及生命週期的章節中我們提過 render() 這個方法，而且有特別指出它是在 Class Component 所有生命週期當中唯一一個一定要使用的方法（附上傳送門）。今天我們就要來介紹如何搭配 JavaScript 的條件式，且依據不同的狀況來判斷是否渲染元件？

怎麼使用條件 Render

官方文件中提到除了常見的 if...else 語法之外，也可以在 React.js 中的 JSX 搭配以下三個方法來設定渲染的條件：

1. 變數宣告
2. && 運算元
3. 三元運算子

下面我們就大家介紹這三種條件式的運用範例吧！

變數宣告

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

先附上官方 CodePen 給大家看上述範例實作的結果，我們在 render() 這個 Function 中宣告了一個變數 isLoggedIn 並用該變數的布林值來判定畫面要渲染的是哪一個 button ？

&& 運算元

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

一樣附上官網的 CodePen 先讓大家了解範例程式碼要呈現的結果，上述範例採用了 && 運算元 的條件，當 && 條件式左邊的條件成立（結果為 true ）的話，就會執行右邊的內容；反之為不成立（結果為 false ）的話，就不顯示任何東西。

三元運算子

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

在 render() 中使用三元運算子，當宣告的 isLoggedIn 變數為 true 時渲染 LogoutButton 這個 Function 。反之該變數為 false 值的話就渲染 LoginButton 。

不想讓元件渲染的時候？

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

像是上面官網的範例程式碼當中，我們可以發現 WarningBanner 這個 Function Component 的渲染與否取決於傳入的 warn 值。如果該 props 的值為 false 時就會回傳一個 null 值，這就代表該元件不會執行渲染了。

關於條件渲染的概念，其實都是在 render() 函示裡面使用 JavaScript 的條件式或是運算子來搭配完成的。如果你有接觸過 Vue.js 的話就更容易理解一些，因為這個概念就等同於我們使用 v-if 做渲染與否的判定一樣。

明天就要介紹 React.js 中的表單相關應用！
如果有任何問題都非常非常歡迎提出和指教唷～
那我們下篇見ʘ‿ʘ