
Reactのjsxでif文を使って表示を変える方法
reactで、jsxの中で、ユーザーのログイン状態に応じて画面を変えるという実装をする必要があったので、そのやり方をログに残しておきます。
まず、基本ですが、JSXの内部では、if-else文は機能しません。これは、JSXが関数呼び出しやオブジェクト構築のための構文糖に過ぎないからです。
つまり、JSXは、基本的にはシンタクティックシュガーですから、コンパイルの後は、JSX の式は通常の JavaScript の関数呼び出しとなり、
JavaScript オブジェクトとして評価されます。そのため、中括弧で囲むことで、任意の JavaScript 式を JSX に埋め込むことができるわけですよね。
結果的に、直接JSXの中にステートメント(if-else/switch/for)を入れることはできません。
じゃあ、どうするかと言いますと、要素を条件付きでレンダリングしたい場合は、次のように三項演算子を使用します。
もしくは、jsxから関数を呼び出し、その中にすべてのif-elseロジックを入れることで、表現が可能です。
以上。