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

【React】JSXを使ったIF文の書き方を解説【条件付きレンダリング】

更新日 :

ReactでIF文を書く方法を解説

Reactでは、IF文を使った条件付きレンダリングをすることが出来ます。

 

これは、通常のJavaScriptと同じように、if文または条件演算子などを使用してUI を更新させることが可能です。

 

例えばこんな感じで、簡単ですね。

 

 

isLoggedInは、 propの値に応じて異なる結果を返してくれます。

 

JSXを使ったIF文の書き方を解説

 

JSX の中にIF文を埋め込むためには、中括弧で囲む必要があります。

 

中括弧で囲むことで任意の JavaScript 式を展開できます。

 

以下のような感じ。

 

 

jsxから関数を呼び出し、

 

その中にすべてのif-elseロジックを入れることでも表現が可能です。

 

 

以上です。

 

参考にした記事

 

if-else statement inside jsx: ReactJS

Conditional Rendering



コメントを残す

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

関連記事