Jak vykreslit komponent v závislosti na podmínce…

Obvykle se používají následující přístupy:

Podmíněné vykreslování pomocí ternárního operátoru nebo if: Nejjednodušší způsob.

// Příklad s ternárním operátorem v Reactu
function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Ahoj, uživateli!</p>
      ) : (
        <button>Přihlásit se</button>
      )}
    </div>
  );
}

// Příklad s if uvnitř funkčního komponentu
function AnotherComponent({ isLoading }) {
  if (isLoading) {
    return <p>Načítání...</p>;
  }
  return <h1>Data byla načtena!</h1>;
}

Logické AND (&&): Vhodné, když je třeba zobrazit komponentu pouze při pravdivé podmínce.

// Příklad s && v Reactu
function MessagesCount({ count }) {
  return (
    <div>
      {count > 0 && <p>Máte {count} nových zpráv.</p>}
    </div>
  );
}

Použití funkcí a podkomponent: Umožňuje přesunout logiku vykreslování do samostatných funkcí nebo komponent pro lepší čitelnost a opětovné použití.

// Příklad s funkcí v Reactu
function renderContent(userRole) {
  if (userRole === 'admin') {
    return <AdminPanel />;
  } else if (userRole === 'user') {
    return <UserProfile />;
  }
  return <LoginPage />;
}

function App({ userRole }) {
  return (
    <div>
      {renderContent(userRole)}
    </div>
  );
}

Pole a metoda map: Pro zobrazení seznamu komponent v závislosti na datech.

// Příklad s map v Reactu
function ItemsList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Skrývá nebo ukazuje prvek, ale komponenta se stále vykresluje. Vhodné pro jednoduché případy, kdy stav neovlivňuje strukturu DOM.

/* Příklad CSS */
.hidden {
  display: none;
}

// Příklad použití CSS třídy v Reactu
function ToggleableContent({ isVisible }) {
  return (
    <div className={isVisible ? '' : 'hidden'}>
      <p>Tento obsah je skrytý.</p>
    </div>
  );
}

Volba metody závisí na složitosti podmínky a struktuře komponenty. Pro jednoduché podmínky často stačí ternární operátor nebo &&. Pro složitější scénáře a lepší organizaci kódu se doporučuje používat samostatné funkce nebo komponenty. Použití CSS display / visibility je třeba provádět opatrně, pokud je nutné úplně odstranit prvek z DOM.

Jak vykreslit komponent v závislosti na podmínce?