Kaip nupiešti komponentą priklausomai nuo sąlygos…

Paprastai naudojami šie metodai:

Sąlyginis atvaizdavimas naudojant ternarinį operatorių arba if: Paprasčiausias būdas.

// Pavyzdys su ternariniu operatoriumi React
function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Sveiki, naudotojau!</p>
      ) : (
        <button>Prisijungti</button>
      )}
    </div>
  );
}

// Pavyzdys su `if` funkcijos viduje
function AnotherComponent({ isLoading }) {
  if (isLoading) {
    return <p>Įkeliama...</p>;
  }
  return <h1>Duomenys įkelti!</h1>;
}

Loginis IR (&&): Patogu, kai reikia rodyti komponentą tik tada, kai sąlyga yra teisinga.

// Pavyzdys su && React
function MessagesCount({ count }) {
  return (
    <div>
      {count > 0 && <p>Jūs turite {count} naujų žinučių.</p>}
    </div>
  );
}

Funkcijų ir vaikų komponentų naudojimas: Leidžia išskirti atvaizdavimo logiką į atskiras funkcijas arba komponentus, siekiant geresnio skaitomumo ir pakartotinio naudojimo.

// Pavyzdys su funkcija 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>
  );
}

Masyvai ir map metodas: Naudojamas komponentų sąrašų atvaizdavimui priklausomai nuo duomenų.

// Pavyzdys su `map` React
function ItemsList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Slėpti arba rodyti elementą, tačiau komponentas vis dar atvaizduojamas. Tinka paprastiems atvejams, kai būsena neturi įtakos DOM struktūrai.

/* CSS pavyzdys */
.hidden {
  display: none;
}

// CSS klasės taikymas React
function ToggleableContent({ isVisible }) {
  return (
    <div className={isVisible ? '' : 'hidden'}>
      <p>Šis turinys yra paslėptas.</p>
    </div>
  );
}

Pasirinkimas priklauso nuo sąlygos sudėtingumo ir komponento struktūros. Paprastoms sąlygoms dažnai pakanka ternarinio operatoriaus arba &&. Daugiau sudėtingų scenarijų ir geresnės kodo organizacijos atveju rekomenduojama naudoti atskiras funkcijas arba komponentus. CSS display / visibility naudoti atsargiai, jei nereikia visiškai pašalinti elemento iš DOM.

Kaip nupiešti komponentą priklausomai nuo sąlygos?