【React】コンポーネントの出しわけ

あるプロジェクトのコードを読んでいて、「JSXでのコンポーネントの出しわけがスマートじゃない！」
と思ったので、良い例と悪い例を紹介します。

条件に合致する場合のみコンポーネントをレンダリングしたい

例として、
サイト全体で使う Header コンポーネントがあり、
サイトトップページ以外では、ホームに戻すリンクを設置したい場合を想定。

悪い例

{!props.home ? (
	<Link href="/">
		<a>Back to home</a>
	</Link>
) : null}

三項演算子を使って、条件を満たさないときはnullを返却している。
nullを返却しているのが冗長だと感じます。

良い例

{!props.home && (
	<Link href="/">
		<a>Back to home</a>
	</Link>
)}

論理演算子の && を使用して、条件を満たす時のみ返却。
こちらの方が記述量少なくて良いと思います。

条件によって、レンダリングするコンポーネントを変えたいと言うのであれば、三項演算子を使うのですが、
条件を満たす場合のみレンダリングしたいということであれば、論理演算子で済ませて良いと思います。

コンポーネントをだし分ける条件が3つ以上ある場合

出しわけが3つ以上ある場合を実装している箇所でこんなコードを見ました。
例がすぐに思いつかず、シンプルなコンポーネントになってしまっていますが、本当はもっと複雑なものだと思ってください…

悪い例

{() => {
	switch (place) {
		case 'home':
			return <div>home</div>;
		case 'about':
			return <div>about</div>;
		case 'mail':
			return <div>mail</div>;
	}
}}

JSX内にswitch文を書いています。
JSXではあまりロジックは持ち込まず、できるだけ表示に関することに専念させたいです。

良い例

...
// ↓JS
const func = place => {
	switch (place) {
		case 'home':
			return <div>home</div>;
		case 'about':
			return <div>about</div>;
		case 'mail':
			return <div>mail</div>;
	}
};
...
// ↓JSX
...
{func(place)}
...

条件分岐部分はJSXの外に切り出した方が、ロジックを持ち込まずスッキリします。
この書き方がベストかどうかは置いといて、先述のコードよりかはマシかと思います。。

終わり

こういう話を持ち出すと好き嫌いが分かれるので、
今回のも、私の好みの書き方として捉えていただけると幸いです。