Ako vykresliť komponent v závislosti od podmienky…

Obvykle sa používajú nasledujúce prístupy:

Podmienené vykresľovanie pomocou ternárneho operátora alebo if: Najjednoduchší spôsob.

// Príklad s ternárnym operátorom v React
function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Ahoj, používateľ!</p>
      ) : (
        <button>Prihlásiť sa</button>
      )}
    </div>
  );
}

// Príklad s if vo vnútri funkčnej komponenty
function AnotherComponent({ isLoading }) {
  if (isLoading) {
    return <p>Načítava sa...</p>;
  }
  return <h1>Dáta boli načítané!</h1>;
}

Logické AND (&&): Vhodné, keď je potrebné zobraziť komponentu iba pri pravdivom podmienke.

// Príklad s && v React
function MessagesCount({ count }) {
  return (
    <div>
      {count > 0 && <p>Máte {count} nových správ.</p>}
    </div>
  );
}

Použitie funkcií a podkomponent: Umožňuje presunúť logiku renderovania do samostatných funkcií alebo komponentov pre lepšiu čitateľnosť a opätovné použitie.

// Príklad s funkciou v React
function renderContent(userRole) {
  if (userRole === 'admin') {
    return <AdminPanel />;
  } else if (userRole === 'user') {
    return <UserProfile />;
  }
  return <LoginPage />;
}

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

Polia a metóda map: Na zobrazenie zoznamu komponentov v závislosti od dát.

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

CSS display / visibility: Skryje alebo zobrazí prvok, ale komponenta sa stále renderuje. Vhodné pre jednoduché prípady, keď stav neovplyvňuje štruktúru DOM.

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

// Príklad s použitím CSS triedy v React
function ToggleableContent({ isVisible }) {
  return (
    <div className={isVisible ? '' : 'hidden'}>
      <p>Tento obsah sa skrýva.</p>
    </div>
  );
}

Voľba metódy závisí od zložitosti podmienky a štruktúry komponentu. Pre jednoduché podmienky často stačí ternárny operátor alebo &&. Pre zložitejšie scenáre a lepšiu organizáciu kódu sa odporúča používať samostatné funkcie alebo komponenty. CSS display / visibility je potrebné používať opatrne, ak nie je potrebné úplne odstrániť prvok z DOM.

Ako vykresliť komponent v závislosti od podmienky?