Как да изрисуваме компонент в зависимост от условие…

Обикновено се използват следните подходи:

Условно рендериране с помощта на тернарен оператор или 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.

Как да изрисуваме компонент в зависимост от условие?