Reactで条件付きレンダリング

私は普段Vue.jsを書いているのですが、Vueでいうv-ifが、Reactだとどうなるのか調べました。

方法1 JSXに{}で式を埋め込む

中括弧{}で式を埋め込む

  return (
    <div>
      <h1>Hello!</h1>
      {name &&
        <h2>
          {name}があれば表示される
        </h2>
      }
    </div>
  );

この場合、左辺がtrueであれば右辺が表示されて、左辺がfalseなら右辺は表示されない

方法2 三項演算子

式は参考URLからそのまま引用

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

ログインしていればログアウトボタンが表示されて、していなければログインボタンが表示される。
なお、条件が複雑になる、見えづらいと感じたらコンポーネントを分割することを考えてくださいとのこと。
この例で言えば、このログイン処理以外に何か処理を追加したい場合は、コンポーネントを分けた方が良さそうです。

参考

ja.reactjs.org