条件付きレンダリング

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

真偽


ぎぞう

  • の数字のうち、0は偽
  • である.
  • 文字列で、「」が偽(スペースが空、スペースが正)の場合
  • が真
  • booleanの仮面は
  • null false(空ですが、元々割り当てられていたもので、誰かがわざと空にした場合はnullを使用するのがデフォルトルール)
  • 未定義の虚偽(空)
  • NaNは偽(非数値)
    https://developer.mozilla.org/ko/docs/Glossary/Falsy
  • 真情


    嘘とは逆の状況は本当だ.
    https://developer.mozilla.org/ko/docs/Glossary/Truthy