React - 条件付きレンダリング

条件付きレンダリング

定義

• プログラムの状態に応じてコンポーネントの一部のみをレンダリングすること- 要素の表示/非表示や認証処理などの用途で利用可能- ifや条件演算子などを利用して実装可能

例

• ログインしていない状態

• ログイン状態

使用したコード

react { isLogged ? (ログアウト) : (ログイン)}}

使用方法

react //if文の使用方法function LoginComp(comp){ const loggedBool = comp.isLogged; if(loggedBool){ return( ) } return( )}

//三項演算子の使用方法 //condition ?. true : false の方式で動作function LoginComp(comp){ const loggedBool = comp.isLogged; return( <> {loggedBool ? : } </> )}

• 三項演算子を使用する場合、return文一つだけで使用可能である