条件付きレンダリング

4461 ワード

テキストリンク

さんこうえんざんし

dataは同期して受信する必要があるデータですが、データが来る前に戻り部分でレンダリングされているので、3つの演算子を使用して、データがあるときとないときにすべてのデータを記録することができます.
データが到着する前に、私が欲しいものを非同期で表示します.

<div>{data?data.fetchProduct.seller: <span>loading...</span> }판매자의 상품입니다</div>

&&演算子

data && data.fetchBoard.writer

&&データがない場合、演算子はundefinedを返します.
データがない場合はデータが表示され、データがある場合はデータが表示されます.fetchBoard.作者を皆さんにお见せします

傍観者

data?.fetchBoard.writer

オプション-Chainingは?演算子の前のオブジェクトの参照がundefinedまたはnullの場合、undefinedが返されます.
上の3つの演算子、&&演算子と同じ機能を持っていますが、より簡単です.
最近の構文

Nullish-coalescing

data ?? data.fetchBoard

nullish coalingは演算子で、nullとundefinedのみを先に偽の場合にレンダリングします.

演算子を使用してconsoleで表示した結果

"사과" && "안녕하세요"
'안녕하세요'
"" || "반갑습니다"
'반갑습니다'
"사과" || "반갑습니다"
'사과'
0 || "안녕하세요"
'안녕하세요'
false || "안녕"
'안녕'
null || "헬로"
'헬로'
undefined || "하이"
'하이'
null ?? "주똄므" 
'주똄므'
undefined ?? "봉쥴"
'봉쥴'
0 ?? "니하오"
0