n/a.ターゲット

条件レンダリング

について

7.条件レンダリング

リアクターは、条件付きレンダリングについて次のように説明します.

Reactでは、パッケージングに必要なモーションの構成部品を作成できます.これにより、アプリケーションのステータスに応じて複数の構成部品のみをレンダリングできます.
次の2つの要素があると仮定します:

.

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

は、2つのコンポーネントのユーザーのログイン状態に応じて異なるレンダリングを行います.

function Greeting({ isLogin }) {
  if (isLogin) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

export default function App() {
  const isLogin = false;
  return (
    <div className="App">
      <Greeting />
    </div>
  );
}

で渡されたツールisLoginがtrueの場合、ユーザGreeting要素がfalseの場合、GuestGreeting要素がレンダリングされます.

上のコードはisLoginをfalseに設定しているのでGuestGreetingをレンダリングします.

7-1. 要素変数

ElinMENTを変数に保存し、出力された他の部分が変わらない場合は、部分要素を条件付きでレンダリングすることができる.

function Greeting({ isLogin }) {
  let button;
  if (isLogin) {
    button = <LogoutButton onClick={this.logout} />;
  } else {
    button = <LoginButton onClick={this.login} />;
  }
  
  return (
    <div>
      <Main isLogin={isLogin} />
      {button}
    </div>
  )
}

出力部{button}は、isLoginの値に従って条件付きでレンダリングすることができる.

7-2. 論理および演算子の使用

JSXでは、カッコを使用して式を含めることができ、論理演算子&&を使用して条件付きでインラインにセグメントを追加することができます.

function User({ name }) {
  return <h1>{name && `${name}님`} 반갑습니다.</h1>;
}

function Guest() {
  return <h1>어서오세요. 회원이시라면 로그인해주세요.</h1>;
}

function Greeting({ isLogin }) {
  const name = "James";
  return <div>{isLogin ? <User name={name} /> : <Guest />}</div>;
}

export default function Condition() {
  const isLogin = true;
  return (
    <div>
      <Greeting isLogin={isLogin} />
    </div>
  );
}

ユーザーコンポーネントに論理演算子&&をpropsのnameとして使用している場合は、${name}お会いできて嬉しいです.出力します.

nameが存在しなければ、「お会いできて嬉しいです.」出力のみ.

7-2-1. 論理&演算子

true&式は常に式で計算されます.

false&式は常にfalseと評価される.

したがって、条件がtrueの場合にのみ、後続の式が出力されます.

7-2-2. 注意事項

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}

の値が0の場合、falseが計算され、後続の式はスキップされますが、false式が返されます.

したがって、上記の例は、次のように0を返します.

<div>0</div>

7-3. 3つの演算子の使用

function User({ name }) {
  return <h1>{name && `${name}님`} 반갑습니다.</h1>;
}

function Guest() {
  return <h1>어서오세요. 회원이시라면 로그인해주세요.</h1>;
}

function Greeting({ isLogin }) {
  const name = "James";
  return <div>{isLogin ? <User name={name} /> : <Guest />}</div>;
}

export default function Condition() {
  const isLogin = true;
  return (
    <div>
      <Greeting isLogin={isLogin} />
    </div>
  );
}

Greeting構成部品では、isLoginがtrueの場合、ユーザ構成部品がfalseの場合、ゲスト構成部品がレンダリングされる3つの演算子が使用されます.

7-4. レンダーをブロック(Block Render)

要素をレンダリングしたくない場合は、レンダリング結果を出力するのではなくnullを返すことでレンダリングをブロックできます.

function Count({ count }) {
  return <h2>{count}번째 방문입니다.</h2>;
}

function User({ name }) {
  const count = 1;
  return (
    <div>
      <h1>{name && `${name}님`} 반갑습니다.</h1>
      {count !== 0 ? <Count count={count} /> : null}
    </div>
  );
}

以上のコードで、アクセス数countが0でない場合、count構成部品をレンダリングしてアクセス数を表示します.

ただしcountが0であればnullを返してアクセス回数自体を表示しないことができます.

ソース

conditional-rendering(React)