【React】JSXを使ったIF文の書き方を解説【条件付きレンダリング】
ReactでIF文を書く方法を解説
Reactでは、IF文を使った条件付きレンダリングをすることが出来ます。
これは、通常のJavaScriptと同じように、if文または条件演算子などを使用してUI を更新させることが可能です。
例えばこんな感じで、簡単ですね。
isLoggedInは、 propの値に応じて異なる結果を返してくれます。
JSXを使ったIF文の書き方を解説
JSX の中にIF文を埋め込むためには、中括弧で囲む必要があります。
中括弧で囲むことで任意の JavaScript 式を展開できます。
以下のような感じ。
jsxから関数を呼び出し、
その中にすべてのif-elseロジックを入れることでも表現が可能です。
以上です。
参考にした記事
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！