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

Обычно используют следующие подходы:

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