JSXの中でif...else文を使って条件分岐する

Reactで開発をしていると、propsの値に応じて返すコンポーネントを変えたい場合が多々あります。
しかし、JSX内で実行できるのは式(expression)のみであり、if...else条件のような文(statement)は書くことができないため、複雑な分岐処理を書くためには工夫が必要になります。

案1. 三項演算子を組み合わせる

三項演算子を使った式A ? B : Cは、Aがfalseと評価された場合にCを返すだけなので、その後にCを起点として再び三項演算子の式を繋げることができます。
簡単な方法ですが、条件が複雑になると異様に読みづらくなります。

const Fruit = props => {
  return (
    <div>
      {props.fruit === 'apple' ? (
        <Apple />
      ) : props.fruit === 'orange' ? (
        <Orange />
      ) : (
        <Banana />
      )}
    </div>
  );
};

案2. 即時関数を使う

関数はJSX内で実行できるため、関数内でif文を使って条件分岐することができます。
ただ即時関数は読み辛いので、こちらも個人的には好きではありません。

const Fruit = props => {
  return (
    <div>
      {(() => {
        if (props.fruit === 'apple') {
          return <Apple />;
        } else if (props.fruit === 'orange') {
          return <Orange />;
        } else {
          return <Banana />;
        }
      })()}
    </div>
  );
};

案3. 条件分岐処理をJSXの外に出す

当然ですが、JSX以外の場所なら普通にJavaScriptが書けます。なので、return文の前で条件分岐の処理を書いてしまえば良いです。
コンポーネントが大きくなると、条件分岐処理とreturn文が離れてしまい読みづらくなることがありますが、多くの場合はこちらの方がシンプルに書くことができると思います。

const Fruit = props => {
  let fruit;
  if (props.fruit === 'apple') {
    fruit = <Apple />;
  } else if (props.fruit === 'orange') {
    fruit = <Orange />;
  } else {
    fruit = <Banana />;
  }

  return <div>{fruit}</div>;
};

参考サイト