- はじめに このセクションでは、Reactでの条件付きレンダリングに三項演算子を使用する方法を学びます。三項演算子は、条件付きレンダリングを処理するための簡潔でエレガントな方法です。GeekとGalの会話を追ってもっと学びましょう！
Reactで条件付きレンダリングを実現するもう一つの方法は、三項演算子を使うことだよ。
三項演算子ってどうやって動くの？
三項演算子は、if-else文の短縮形だよ。
条件 ? 真の場合の式 : 偽の場合の式
のように書くんだ。
- 三項演算子を使った条件付きレンダリング
Reactでの条件付きレンダリングに三項演算子を使う方法を理解するための例を見せてあげるね！
function DisplayGreeting({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? (
<h1>Welcome back, user!</h1>
) : (
<h1>Please log in.</h1>
)}
</div>
);
}
わかった！もし"isLoggedIn"がtrueなら、"Welcome back, user!"と表示されて、そうでなければ"Please log in."と表示されるんだね。
そうだよ！三項演算子は、Reactで条件付きレンダリングを処理するための強力で簡潔な方法なの。
- 面白い例
三項演算子を使った面白い例を教えてもらえる？
いいよ！準備ができたら楽しい事実を表示するコンポーネントを作ってみよう！
function FunFact({ isReady }) {
return (
<div>
{isReady ? (
<p>カタツムリが最大3年間寝ることができるって知ってた？😮</p>
) : (
<p>楽しい事実が聞ける準備ができたら教えてね！</p>
)}
</div>
);
}
ハハ、それはすごい！もし"isReady"がtrueなら、カタツムリに関する楽しい事実を表示し、そうでなければ楽しい事実が聞ければ知らせてほしいってメッセージが表示されるんだね。
その通り！三項演算子は条件付きレンダリングをシンプルで楽しくするのに役立つよ。ぜひ試してみてね！
- おわりに
三項演算子は、Reactで条件付きレンダリングを達成するための効果的な方法です。if-else文に代わる簡潔な方法で、努力せずにダイナミックなUIを作成するのに役立ちます。Reactのスキルを向上させるために、新しい技術を学んでマスターしましょう！😄