条件付きレンダリング

特定の条件の真偽に応じて異なる結果を出力する.App.jsからHelloの隣のpropsにisSpecialを追加します.

<Hello name="react" color="red" isSpecial={true}/>  

isSpecialの値に従って異なる画面を出力する場合は、3つの演算子を使用します.Hello.jsに次のコードを記述します.

 return (
    <div style={{
        color: color
    }}>
        {isSpecial ? <b>*</b> : null}
        hi there?! {name}
        </div>
    );

このときisSpecialのフレーズは「isSpecial値が本当なら*を表示し、偽物なら何も追加しない」という意味です.
参照に供するのはisSpecialであり、少なくともデフォルト値はtrueに適用されるので、isSpecial = {true}と書く必要はありません.
これらの条件に基づいて値を変更する場合は、3つの演算子を使用することが望ましいが、値を簡単に表示および消去することを目的とする場合は、&&演算子を使用してコードを簡潔に記述することができる. {isSpecial && <b>*</b>} and演算子isSpecialがtrueの場合は、実行右の条件を示します.