React 条件付きレンダーを学ぶ 入門

2019年10月31日

今回は、条件に応じて表示を切り替えるような処理について学びたいと思います。

良くあるいいねボタンの切り替えを作っていきたいと思います。

手を動かしながら学びたい方は、以下を実施してプロジェクトを作成ください。

App.jsを編集していきます。

条件付きレンダーの理解

条件分岐方法色々あると思いますが、renderの際に分岐する方法についてサンプルコードを元に作っていきます。

表示用の関数を用意

いいね後といいね前の表示関数を作成

// いいね文言の表示用関数
function Liked(props) {
  return <h1>いいね！しました</h1>;
}
function NonLike(props) {
  return <h1>いいね！お願いします</h1>;
}
// いいねボタンの表示用関数
function LikeButton(props) {
  return (
    <button onClick={props.onClick}>
      いいねをする
    </button>
  );
}
function NonLikeButton(props) {
  return (
    <button onClick={props.onClick}>
      いいねをしない
    </button>
  );
}

表示用の切り替え

isLikeの真偽によって、表示を出し分ける関数を作成

function Likeing(props) {
  const isLike = props.isLike;
  if (isLike) {
    return <Liked />;
  }
  return <NonLike />;
}

いいねのコンポーネント

いいねの文言・ボタンをisLikeの真偽に応じて、制御するコンポーネントを作成

class LikeControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLikeClick = this.handleLikeClick.bind(this);
    this.handleNonLikeClick = this.handleNonLikeClick.bind(this);
    this.state = { isLike: false };
  }
  handleLikeClick() {
    this.setState({ isLike: true });
  }
  handleNonLikeClick() {
    this.setState({ isLike: false });
  }
  render() {
    const isLike = this.state.isLike;
    let likeButton;
    if (isLike) {
      likeButton = <NonLikeButton onClick={this.handleNonLikeClick} />;
    } else {
      likeButton = <LikeButton onClick={this.handleLikeClick} />;
    }
    return (
      <div>
        <Likeing isLike={isLike} />
        {likeButton}
      </div>
    );
  }
}

最後に作成したLikeControlを設定

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <LikeControl />
      </header>
    </div>
  );
}

$ yarn start

いいねボタンを押下するとボタンと文言が表示できました。

まとめ

構文を分けているため、見通しは良くなると思いますが、関数の数など結構コード量は増えてしまいます。

他にもJSXでのインライン条件記述方法もありますので、チームで作業している場合に関しては、やりやすい方で実装するのがいいかもしれません。