Hogyan rajzoljuk ki egy komponens a feltételtől…

Általában a következő megközelítéseket alkalmazzák:

Feltételes renderelés ternáris operátorral vagy if-el: A legegyszerűbb módszer.

// Példa ternáris operátorral React-ben
function SajátKomponens({ bejelentkezve }) {
  return (
    <div>
      {bejelentkezve ? (
        <p>Szia, felhasználó!</p>
      ) : (
        <button>Bejelentkezés</button>
      )}
    </div>
  );
}

// Példa if-vel egy funkcionális komponensen belül
function MásikKomponens({ tölt }) {
  if (tölt) {
    return <p>Töltés...</p>;
  }
  return <h1>Adatok betöltve!</h1>;
}

Logikai ÉS (&&) operátor: Akkor hasznos, ha csak akkor akarunk egy komponenst megjeleníteni, ha a feltétel igaz.

// Példa &&-val React-ben
function Üzenetek({ szám }) {
  return (
    <div>
      {szám > 0 && <p>Új üzenete van {szám}.</p>}
    </div>
  );
}

Függvények és gyermek komponensek használata: Lehetővé teszi a renderelési logika elkülönítését külön függvényekbe vagy komponensekbe a jobb olvashatóság és újrahasznosítás érdekében.

// Példa React-ben függvénnyel
function renderContent(role) {
  if (role === 'admin') {
    return <AdminPanel />;
  } else if (role === 'felhasználó') {
    return <FelhasználóiProfil />;
  }
  return <BejelentkezésiOldal />;
}

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

Tömbök és a map metódus: A komponensek listájának megjelenítésére adatok alapján.

// React-ben map példával
function ItemsList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Elrejti vagy megjeleníti az elemet, de a komponens továbbra is renderelődik. Egyszerű esetekhez alkalmas, amikor az állapot nem befolyásolja a DOM szerkezetét.

/* CSS példa */
.rejtett {
  display: none;
}

// CSS osztály alkalmazás React-ben
function ToggleableContent({ látható }) {
  return (
    <div className={látható ? '' : 'rejtett'}>
      <p>Ez a tartalom el van rejtve.</p>
    </div>
  );
}

A módszer kiválasztása a feltétel összetettségétől és a komponens szerkezetétől függ. Egyszerű feltételek esetén gyakran elegendő a ternáris operátor vagy a &&. Komplexebb szcenáriókhoz és a kód jobb szervezéséhez ajánlott külön függvények vagy komponensek használata. A CSS display / visibility használatát körültekintően alkalmazza, ha nem szükséges az elem teljes eltávolítása a DOM-ból.

Hogyan rajzoljuk ki egy komponens a feltételtől függően?