Jak wyrenderować komponent w zależności od warunku…

Zazwyczaj stosuje się następujące podejścia:

Renderowanie warunkowe za pomocą operatora ternarnego lub if: Najprostszy sposób.

// Przykład z operatorem ternarnym w React
function MójKomponent({ jestZalogowany }) {
  return (
    <div>
      {jestZalogowany ? (
        <p>Cześć, użytkowniku!</p>
      ) : (
        <button>Zaloguj się</button>
      )}
    </div>
  );
}

// Przykład z if wewnątrz komponentu funkcyjnego
function InnyKomponent({ wLadowaniu }) {
  if (wLadowaniu) {
    return <p>Ładowanie...</p>;
  }
  return <h1>Dane załadowane!</h1>;
}

Operator logiczny AND (&&): Przydatny, gdy chcesz wyświetlić komponent tylko wtedy, gdy warunek jest prawdziwy.

// Przykład z && w React
function Wiadomości({ liczba }) {
  return (
    <div>
      {liczba > 0 && <p>Masz {liczba} nowych wiadomości.</p>}
    </div>
  );
}

Użycie funkcji i komponentów potomnych: Pozwala wyodrębnić logikę renderowania do osobnych funkcji lub komponentów dla lepszej czytelności i ponownego użycia.

// Przykład z funkcją w React
function renderujZawartosc(rangaUzytkownika) {
  if (rangaUzytkownika === 'admin') {
    return <PanelAdmin />;
  } else if (rangaUzytkownika === 'uzytkownik') {
    return <ProfilUzytkownika />;
  }
  return <StronaLogowania />;
}

function App({ rangaUzytkownika }) {
  return (
    <div>
      {renderujZawartosc(rangaUzytkownika)}
    </div>
  );
}

Tablice i metoda map: Do wyświetlania listy komponentów na podstawie danych.

// Przykład z map w React
function ListaElementów({ elementy }) {
  return (
    <ul>
      {elementy.map(element => (
        <li key={element.id}>{element.nazwa}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Ukrywa lub pokazuje element, ale komponent nadal jest renderowany. Nadaje się do prostych przypadków, gdy stan nie wpływa na strukturę DOM.

/* Przykład CSS */
.ukryj {
  display: none;
}

// Przykład zastosowania klasy CSS w React
function UkrywalnaZawartosc({ jestWidoczny }) {
  return (
    <div className={jestWidoczny ? '' : 'ukryj'}>
      <p>Ta zawartość jest ukryta.</p>
    </div>
  );
}

Wybór metody zależy od złożoności warunku i struktury komponentu. Dla prostych warunków często wystarczy operator ternarny lub &&. Dla bardziej złożonych scenariuszy i lepszej organizacji kodu zaleca się użycie osobnych funkcji lub komponentów. Używaj CSS display / visibility ostrożnie, jeśli nie chcesz całkowicie usuwać elementu z DOM.

Jak wyrenderować komponent w zależności od warunku?