Kako prikazati komponentu u zavisnosti od uslova…

Обично се користе следњи приступи:

Условно рендеровање помоћу тернарног оператора или if: Најједноставнији начин.

// Пример са тернарним оператором у React-у
function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Здраво, корисниче!</p>
      ) : (
        <button>Пријави се</button>
      )}
    </div>
  );
}

// Пример са if унутар функционалне компоненте
function AnotherComponent({ isLoading }) {
  if (isLoading) {
    return <p>Учитавање...</p>;
  }
  return <h1>Подаци су учитани!</h1>;
}

Логичко И (&&): Погодно када треба приказати компоненту само ако је услов тачан.

// Пример са && у React-у
function MessagesCount({ count }) {
  return (
    <div>
      {count > 0 && <p>Имате {count} нових порука.</p>}
    </div>
  );
}

Користећи функције и подкомпоненте: Омогућава преношење логике рендеровања у посебне функције или компоненте ради боље читљивости и поновне употребе.

// Пример са функцијом у 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>
  );
}

Масиви и метод map: За приказивање листе компоненти у зависности од података.

// Пример са map у React-у
function ItemsList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Скрива или приказује елемент, али компонента и даље рендерује. Погодно за једноставне случајеве када стање не утиче на структуру DOM.

/* Пример CSS */
.hidden {
  display: none;
}

// Пример примене CSS класе у React-у
function ToggleableContent({ isVisible }) {
  return (
    <div className={isVisible ? '' : 'hidden'}>
      <p>Овај садржај се скрива.</p>
    </div>
  );
}

Избор метода зависи од сложености услова и структуре компонента. За једноставне услове често је довољан тернарни оператор или &&. За сложеније сценарије и бољу организацију кода препоручује се коришћење одвојених функција или компоненти. CSS display / visibility треба користити опрезно, ако није потребно потпуно уклањање елемента из DOM.

Kako prikazati komponentu u zavisnosti od uslova?