Kā attēlot komponentu atkarībā no nosacījuma…

Parasti tiek izmanto šādus pieejas:

Nosacījuma renderēšana, izmantojot ternāro operatoru vai if: Vienkāršākais veids.

// Piemērs ar ternāro operatoru React
function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Sveiki, lietotāj!</p>
      ) : (
        <button>Pieslēgties</button>
      )}
    </div>
  );
}

// Piemērs ar `if` funkcijas iekšpusē
function AnotherComponent({ isLoading }) {
  if (isLoading) {
    return <p>Ielādējas...</p>;
  }
  return <h1>Dati ir ielādēti!</h1>;
}

Loģiskā AND (&&): Noder, ja nepieciešams parādīt komponenti tikai tad, ja nosacījums ir patiess.

// Piemērs ar && React
function MessagesCount({ count }) {
  return (
    <div>
      {count > 0 && <p>Jums ir {count} jaunas ziņas.</p>}
    </div>
  );
}

Funkciju un bērnu komponentu izmantošana: Ļauj logiku pārvietot uz atsevišķām funkcijām vai komponentiem, lai uzlabotu lasāmību un atkārtotu izmantošanu.

// Piemērs ar funkciju 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>
  );
}

Masīvi un map metode: Lai attēlotu komponentu sarakstu atkarībā no datiem.

// Piemērs ar `map` React
function ItemsList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Paslēpt vai parādīt elementu, bet komponenta joprojām tiek renderēta. Der vienkāršiem gadījumiem, kad stāvoklis neietekmē DOM struktūru.

/* CSS piemērs */
.hidden {
  display: none;
}

// CSS klases piemērs React
function ToggleableContent({ isVisible }) {
  return (
    <div className={isVisible ? '' : 'hidden'}>
      <p>Šis saturs tiek slēpts.</p>
    </div>
  );
}

Izvēle ir atkarīga no nosacījuma sarežģītības un komponenta struktūras. Vienkāršiem nosacījumiem bieži pietiek ar ternāro operatoru vai &&. Sarežģītākiem scenārijiem un labākai koda organizācijai ieteicams izmantot atsevišķas funkcijas vai komponentus. CSS display / visibility jālieto ar piesardzību, ja nav nepieciešams pilnībā noņemt elementu no DOM.

Kā attēlot komponentu atkarībā no nosacījuma?