Cum se redă un component în funcție de o condiție…

De obicei, următoarele abordări sunt utilizate:

Renderizare condiționată folosind operatorul ternar sau if: Cea mai simplă metodă.

// Exemplu cu operator ternar în React
function ComponenteMea({ esteAutentificat }) {
  return (
    <div>
      {esteAutentificat ? (
        <p>Bun venit, utilizator!</p>
      ) : (
        <button>Autentificare</button>
      )}
    </div>
  );
}

// Exemplu cu if în interiorul unui component funcțional
function AltComponent({ înAșteptare }) {
  if (înAșteptare) {
    return <p>Se încarcă...</p>;
  }
  return <h1>Datele au fost încărcate!</h1>;
}

Operatorul logic AND (&&): Util pentru a afișa un component doar dacă condiția este adevărată.

// Exemplu cu && în React
function Mesaje({ count }) {
  return (
    <div>
      {count > 0 && <p>Ai {count} mesaje noi.</p>}
    </div>
  );
}

Utilizarea funcțiilor și componentelor copil: Permite extragerea logicii de randare în funcții sau componente separate pentru o mai bună lizibilitate și reutilizare.

// Exemplu cu funcție în React
function renderContent(roleUser) {
  if (roleUser === 'admin') {
    return <PanouAdmin />;
  } else if (roleUser === 'utilizator') {
    return <ProfilUtilizator />;
  }
  return <PaginaLogin />;
}

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

Array-uri și metoda map: Pentru afișarea unei liste de componente în funcție de date.

// Exemplu cu map în React
function ListaItems({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.nume}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Ascunde sau afișează un element, dar componenta totuși se va randa. Potrivit pentru cazuri simple în care starea nu afectează structura DOM.

/* Exemplu CSS */
.ascuns {
  display: none;
}

// Exemplu de aplicare a clasei CSS în React
function ContinutToggle({ esteVizibil }) {
  return (
    <div className={esteVizibil ? '' : 'ascuns'}>
      <p>Acest conținut este ascuns.</p>
    </div>
  );
}

Alegerea metodei depinde de complexitatea condiției și de structura componentului. Pentru condiții simple, adesea este suficient operatorul ternar sau &&. Pentru scenarii mai complexe și o mai bună organizare a codului, se recomandă utilizarea funcțiilor sau componentelor separate. Folosiți CSS display / visibility cu prudență dacă nu este necesar să eliminați complet elementul din DOM.

Cum se redă un component în funcție de o condiție?