React 条件によって表示を切り替える
Reactでは、JavaScriptの条件式を使って表示する内容を切り替えます。
どの書き方が短いかだけで選ぶと、条件が増えたときに表示の優先順位が分かりにくくなります。読み込み、エラー、データなしのように画面全体が切り替わる状態は早期return、一部分の表示には三項演算子や&&を使い分けます。
if文で早めにreturnする
読み込み中やエラーの場合は、コンポーネントの先頭で表示を返すと分かりやすくなります。
type Props = {
isLoading: boolean;
errorMessage?: string;
userName?: string;
};
export const UserProfile = ({ isLoading, errorMessage, userName }: Props) => {
if (isLoading) {
return <p>読み込んでいます。</p>;
}
if (errorMessage) {
return <p role="alert">{errorMessage}</p>;
}
if (!userName) {
return <p>利用者が見つかりません。</p>;
}
return <p>こんにちは、{userName}さん。</p>;
};上から順番に条件を確認し、該当した時点で以降の処理を行いません。
三項演算子で2つから選ぶ
const LoginStatus = ({ loggedIn }: { loggedIn: boolean }) => {
return <p>{loggedIn ? 'ログイン中' : 'ログアウト中'}</p>;
};条件 ? 条件がtrueの場合 : falseの場合の順に書きます。
三項演算子を何重にもすると読みにくくなるため、条件が多い場合はif文を使用します。
&&で条件を満たす場合だけ表示する
const Notice = ({ hasNewMessage }: { hasNewMessage: boolean }) => {
return (
<div>
{hasNewMessage && <p>新しいメッセージがあります。</p>}
</div>
);
};左側がtrueの場合だけ、右側の要素を表示します。
数値を&&の左側へ直接書かない
意図しない0が表示される例{items.length && <p>{items.length}件あります。</p>}配列が空の場合、式の結果である0が画面に表示されることがあります。比較結果をbooleanにします。
{items.length > 0 && <p>{items.length}件あります。</p>}読み込み中、エラー、データなし、正常表示の順に整理すると、表示漏れを見つけやすくなります。
単純な2択には三項演算子、一部だけの表示には&&、複数の状態にはif文を使うと読みやすくなります。