React（+TypeScript）入門 | 条件分岐

Reactにおいて、条件に応じた表示の切り替え方法についてまとめます。

要素を変数に入れる

条件による表示の分岐をさせたいとき、変数にJSX要素を入れておき、後からそれを入れ込むという方法がとれます。

import * as React from 'react';

interface OnOffState {
    show: boolean;
}

class OnOff extends React.Component<{}, OnOffState> {
  constructor() {
    super();
    this.state = {show: true};
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    this.setState((prevState, props) => {
      return {show: !prevState.show};
    });
  }

  render() {
    let message: JSX.Element | null = null;
    if (this.state.show) {
      message = <div>Hello!!</div>;  
    }

    return (
      <div>
        {message}
        <button onClick={this.handleButtonClick}>On/Off</button>
      </div>
    );
  }
}

export default OnOff;

今回の例ではstateのshowの値に応じて表示するか決定しています。また、ボタンのクリックにより反転させています。

JSXにインラインで書く

JSXにインラインで書くことも可能です。その場合2通りのやり方があります。

&& 演算子を使う

ひとつが論理演算子である&&を使う方法です。
上の例は次のように書くことができます。（render以外省略）

class OnOff extends React.Component<{}, OnOffState> {
...
  render() {
    return (
      <div>
        { this.state.show && 
          <div>Hello!!</div>
        }
        <button onClick={this.handleButtonClick}>On/Off</button>
      </div>
    );
  }
}

三項演算子を使う

&& 演算子を使う他に三項演算子を使う方法もあります。

class OnOff extends React.Component<{}, OnOffState> {
...
  render() {
    return (
      <div>
        { this.state.show ? (
          <div>Hello!!</div>
        ) : (
          null
        )}
        <button onClick={this.handleButtonClick}>On/Off</button>
      </div>
    );
  } 
}