Kuidas joonistada komponent vastavalt tingimusele…

Tavaliselt kasutatakse järgmisi lähenemisviise:

Tingimuslik renderdamine ternaaroperaatori või if abil: Lihtsaim viis.

// Näide ternaaroperaatoriga Reactis
function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Tere, kasutaja!</p>
      ) : (
        <button>Sisene</button>
      )}
    </div>
  );
}

// Näide `if`-ga funktsionaalses komponendis
function AnotherComponent({ isLoading }) {
  if (isLoading) {
    return <p>Laadimine...</p>;
  }
  return <h1>Andmed on laaditud!</h1>;
}

Loogiline JA (&&): Kasulik, kui soovitakse näidata komponenti ainult siis, kui tingimus on tõene.

// Näide `&&`-ga Reactis
function MessagesCount({ count }) {
  return (
    <div>
      {count > 0 && <p>Teil on {count} uut sõnumit.</p>}
    </div>
  );
}

Funktsioonide ja alamkomponentide kasutamine: Annab võimaluse logikat renderdamise funktsioonidesse või komponentidesse välja viia, parandades koodi loetavust ja korduvkasutust.

// Näide Reactis funktsiooniga
function renderContent(userRole) {
  if (userRole === 'admin') {
    return <AdminPanel />;
  } else if (userRole === 'user') {
    return <UserProfile />;
  }
  return <LoginPage />;
}

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

Massiivid ja map meetod: Kasutatakse komponentide loendi kuvamiseks sõltuvalt andmetest.

// Näide `map`-iga Reactis
function ItemsList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Peidab või näitab elementi, kuid komponenti endiselt renderdatakse. Sobib lihtsateks juhtudeks, kus olek ei mõjuta DOM-i struktuuri.

/* Näide CSS-st */
.hidden {
  display: none;
}

// CSS klassi rakendamine Reactis
function ToggleableContent({ isVisible }) {
  return (
    <div className={isVisible ? '' : 'hidden'}>
      <p>Seda sisu peidetakse.</p>
    </div>
  );
}

Valik sõltub tingimuse keerukusest ja komponendi struktuurist. Lihtsate tingimuste puhul piisab sageli ternaaroperaatorist või &&. Keerulisemate stsenaariumide ja parema koodi organiseerimise jaoks soovitatakse kasutada eraldi funktsioone või komponente. CSS display / visibility kasutamisel tuleb olla ettevaatlik, kui ei ole vaja elementi täielikult DOM-ist eemaldada.

Kuidas joonistada komponent vastavalt tingimusele?