07. React - podmíněné vykreslování

Podmíněné vykreslování v React pracuje stejně jako podmínky v jazyce JavaScript. Pomocí operátorů JavaScript if nebo podmíněného operátora vytvořte prvky představující aktuální stav a nechte React aktualizovat uživatelské rozhraní tak, aby odpovídaly.

Zvažte tyto dvě komponenty:

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

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

Vytvoříme součást Greeting, která zobrazí jednu z těchto komponent v závislosti na tom, zda je uživatel přihlášen:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

Tento příklad ukazuje jiný pozdrav v závislosti na hodnotě isLoggedIn prop.

Proměnné prvků

Pro uložení prvků můžete použít proměnné. To vám může pomoci podmíněně vykreslit část komponenty, zatímco zbytek výstupu se nemění.

Zvažte tyto dvě nové komponenty představující tlačítka odhlášení a přihlášení:

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

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

V následujícím příkladu vytvoříme stavovou komponentu nazvanou LoginControl.

Pak bude volána < loginbutton / > nebo < logoutbutton / > v závislosti na jeho aktuálním stavu. Rovněž vykreslí < greeting / > z předchozího příkladu:

GitHub

Při deklaraci proměnné a použití příkazu if je jemný způsob podmíněného vykreslování komponent, někdy můžete chtít použít kratší syntaxi. Existuje několik způsobů, jak vložit podmínky v JSX, vysvětleno níže.

Inline If s logickým operátorem  &&

V JSX můžete vložit libovolné výrazy tak, že je zabalíte do složených závorek. To zahrnuje logický operátor && jazyka JavaScript. Může být užitečné pro podmíněný obsah prvku:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

Funguje proto, že v jazyce JavaScript true && expression vždy vrátí expression a false && expression vždy vrátí false.

Pokud je tedy podmínka true, && zobrazí se na výstupu element přímo po něm. Pokud ano false, bude React ignorovat a přeskočí jej.

Inline If-Else s podmíněným operátorem

Další metodou podmíněného vykreslování prvků je použití operátora podmíněného jazyka JavaScript condition ? true : false.

V následujícím příkladu jej používáme k podmíněnému vykreslení malého bloku textu.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

Lze jej použít i pro složitější výrazy, i když to může být méně přehledné, co se děje:

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

Stejně jako v jazyce JavaScript, je na vás, abyste si vybrali vhodný styl založený na tom, co vy a váš tým považujete za čitelnější. Také si pamatujte, že kdykoli jsou podmínky příliš složité, může být vhodný čas pro extrakci komponenty.

Zabránění renderování komponent

Ve vzácných případech budete možná chtít, aby se komponenta skrývala, i když byla vykreslena jinou komponentou. Chcete-li vrátit null namísto jeho výstupu vykreslení.

V níže uvedeném příkladu < warningbanner / > je vykreslení závislé na hodnotě volaného příkazu warn. Je-li hodnota podpěry false, potom se komponent nevykreslí:

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')

Návrat null z metody render dané komponenty nemá vliv na spouštění metod životního cyklu komponenty. Například componentDidUpdate bude stále voláno.