Reactのjsxでif文を使って表示を変える方法

 

reactで、jsxの中で、ユーザーのログイン状態に応じて画面を変えるという実装をする必要があったので、そのやり方をログに残しておきます。

 

まず、基本ですが、JSXの内部では、if-else文は機能しません。これは、JSXが関数呼び出しやオブジェクト構築のための構文糖に過ぎないからです。

 

つまり、JSXは、基本的にはシンタクティックシュガーですから、コンパイルの後は、JSX の式は通常の JavaScript の関数呼び出しとなり、

 

JavaScript オブジェクトとして評価されます。そのため、中括弧で囲むことで、任意の JavaScript 式を JSX に埋め込むことができるわけですよね。

 

結果的に、直接JSXの中にステートメント(if-else/switch/for)を入れることはできません。

 

じゃあ、どうするかと言いますと、要素を条件付きでレンダリングしたい場合は、次のように三項演算子を使用します。

 

 

もしくは、jsxから関数を呼び出し、その中にすべてのif-elseロジックを入れることで、表現が可能です。

 

 

以上。

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

React

コメントする

メールアドレスが公開されることはありません。