n/a.ターゲット

7.条件レンダリング

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

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

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

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

7-1. 要素変数

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>
  )
}

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

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>
  );
}

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

7-2-2. 注意事項

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

<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>
  );
}

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

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>
  );
}

ソース