Conditional Rendering
1124 ワード
条件付きレンダリング
表示(レンダリング)内容は、指定された条件によって異なります.
const conditionA = () => {console.log("조건A")}
const conditionB = () => {console.log("조건B")}
if( condition === "A")
{conditionA()}
else{conditionB()}ただし、一般的に条件レンダリングとは、3つの演算子、&/|演算子、Optional-Chainingを使用することを意味します.
さんこうえんざんし
データから情報を受信するとnameが表示されます.そうしないとロードされます.展示.
data ? data.name : <div>loading...</div>&&/??/||演算子
&&:データから情報を受信するとnameが表示されます.それ以外の場合は未定義が表示されます.
?? : dataがnullishの場合、(nullまたはundefined)の後の値が表示されます.
||||:falseyの場合、後の値が表示されます.
data && data.name
data ?? data.name
data || data.nameReference
この問題について(Conditional Rendering), 我々は、より多くの情報をここで見つけました https://velog.io/@ssjjyy/Conditional-Renderingテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol