A Reagujte, pokud komponenta

Po mnoha letech používání Vue a Angular.js (použil jsem první verzi Angular, když vyšla) musím říct, že jsem si vždy užíval jednoduchost používání v-if a ng-if podmíněně vykreslovat podřízené komponenty.

Teď píšu primárně React a vadí mi neustálé používání ternárních operátorů při práci s podmíněně renderovanými komponentami.

function SomeComponent({condition}) {
  return <div>
    { condition ? <span>Yes it is true!</span> : null }
  </div>
}

Není to velký problém a existuje mnoho různých způsobů, jak vykreslit komponenty závislé na booleovských hodnotách (například pomocí && ), ale psaní kódu se mi nikdy moc nelíbilo a nemyslím si, že je moc čitelný.

Dnes jsem četl 7 způsobů, jak dosáhnout podmíněného vykreslování v Reactu, a obsahovalo praktický úryvek, který si odteď budu osvojovat.

Podmíněné if komponent

Nemůžu říct, že jsem neuvažoval o abstrahování ternárních operátorů, ale nějak jsem to nikdy nevzal do praxe. Článek Fernanda Doglia mě nyní posunul přes čáru, abych přijal hezčí vzor. Pozdravte funkční if komponenta.

function IF({children, condition}) {
  if (condition) {
    // render children if the condition is truthy
    return children;
  }

  return null;
}

/**
 * Use the component as follows:
 *
 * <IF condition={condition}>
 *   <Greeter username={user.name} />
 * </IF>
 */

Je to sedm řádků kódu a tuto drobnou komponentu lze začlenit do jakéhokoli projektu React jako šikovnou utilitu. Mnohem lepší! Děkuji Fernando!