Conditional Rendering

6973 ワード
React テキストリンク
Conditional Rendering
Reactは、パッケージングに必要なアクションの構成部品を作成します.
これにより、アプリケーションのステータスに応じて、いくつかの構成部品しかレンダリングできません.
Reactでは、条件レンダリングはJavaScriptの条件処理と同じです.
JavaScript演算子(ifまたは조건부 연산자など)を使用して現在のステータスを表す別名を作成すると、reactは現在のステータスに基づいてUIを更新します.
次の2つの構成部品があるとします.
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}
次に、ログインステータスを満たすGreetingコンポーネントを作成して、上記のコンポーネントの1つを表示します.


上記の例は、isLoggedIn propに従って異なる挨拶文を示す.


elimment変数

変数を使用してエンティティを保存でき、出力の他の部分が変わらない場合に条件付きで部分要素をレンダリングできます.


ログアウトとログインボタンを表す2つのコンポーネントがあると仮定します.

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

次の例では、LoginControlというクラスステータス要素を作成します.


この構成部品は、<LoginButton />または<LogoutButton />を現在の状態でレンダリングし、前の例の<Greeting />も同時にレンダリングする.