Условный рендеринг в React — умный интерфейс

В реальных приложениях интерфейс никогда не статичен. Он меняется в зависимости от:

1. Авторизован пользователь или нет
2. Загрузились данные или ещё нет
3. Есть ошибка или всё хорошо
4. Пустой список или с данными
5. Выбрана светлая или тёмная тема

Главная мысль: условный рендеринг — это способ показывать разный JSX в зависимости от условий. Это делает приложение интерактивным и адаптивным.

if/else нельзя использовать внутри JSX, только снаружи.

Пример:

function Greeting({ isLoggedIn, userName }) {
  if (isLoggedIn) {
    return <h1>Добро пожаловать, {userName}!</h1>;
  } else {
    return <button>Войти</button>;
  }
}

Вынос в отдельную функцию:

function getGreeting(isLoggedIn, userName) {
  if (isLoggedIn) {
    return <h1>Добро пожаловать, {userName}!</h1>;
  }
  return <button>Войти</button>;
}

function App({ isLoggedIn, userName }) {
  return (
    <div>
      {getGreeting(isLoggedIn, userName)}
    </div>
  );
}

Используется прямо внутри JSX для простых условий «если — иначе».

Синтаксис:

{условие ? <Если_правда> : <Если_ложь>}

Пример с авторизацией:

function App({ isLoggedIn, userName }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Добро пожаловать, {userName}!</h1>
      ) : (
        <button>Войти</button>
      )}
    </div>
  );
}

Пример с загрузкой:

function DataDisplay({ isLoading, data }) {
  return (
    <div>
      {isLoading ? (
        <p>Загрузка...</p>
      ) : (
        <p>Данные: {data}</p>
      )}
    </div>
  );
}

Вложенные тернарники (осторожно!):

{status === 'loading' ? (
  <p>Загрузка...</p>
) : status === 'error' ? (
  <p>Ошибка!</p>
) : (
  <p>Данные: {data}</p>
)}

Когда нужно показать элемент только при истинном условии (без блока «иначе»).

Синтаксис:

{условие && <Элемент>}

Принцип работы:

1. Если условие true — показывает элемент
2. Если условие false — ничего не показывает (возвращает false)

Пример с уведомлениями:

function Notification({ count }) {
  return (
    <div>
      <h1>Мои сообщения</h1>
      {count > 0 && <p>У вас {count} новых сообщений!</p>}
    </div>
  );
}

Пример с корзиной:

function Cart({ items }) {
  return (
    <div>
      <h2>Корзина</h2>
      {items.length === 0 && <p>Корзина пуста</p>}
      {items.length > 0 && <p>Товаров: {items.length}</p>}
    </div>
  );
}

Осторожно: && может показать 0 вместо ничего:

{items.length && <p>Товаров: {items.length}</p>}
// Если length = 0, на экране появится "0"
// Правильно:
{items.length > 0 && <p>Товаров: {items.length}</p>}

Используется, когда нужно выбрать один из многих вариантов.

Пример с типом уведомления:

function Alert({ type, message }) {
  let alertStyle;

  switch (type) {
    case 'success':
      alertStyle = { color: 'green', border: '2px solid green' };
      break;
    case 'error':
      alertStyle = { color: 'red', border: '2px solid red' };
      break;
    case 'warning':
      alertStyle = { color: 'orange', border: '2px solid orange' };
      break;
    default:
      alertStyle = { color: 'blue', border: '2px solid blue' };
  }

  return <div style={alertStyle}>{message}</div>;
}

Альтернатива — объект с вариантами (чаще используется):

function Alert({ type, message }) {
  const styles = {
    success: { color: 'green', border: '2px solid green' },
    error: { color: 'red', border: '2px solid red' },
    warning: { color: 'orange', border: '2px solid orange' }
  };

  return <div style={styles[type] || styles.default}>{message}</div>;
}

Можно вернуть null из компонента, чтобы ничего не рендерить.

Пример:

function AdBanner({ shouldShow }) {
  if (!shouldShow) {
    return null; // Ничего не показываем
  }

  return <div>Рекламный баннер</div>;
}

Когда использовать:

1. Скрытие элементов по условию
2. Запрет отображения в определённых ситуациях

Можно сохранить JSX в переменную и потом её отрендерить.

Пример:

function UserStatus({ isOnline, lastSeen }) {
  let status;

  if (isOnline) {
    status = <span style={{ color: 'green' }}>Онлайн</span>;
  } else if (lastSeen) {
    status = <span style={{ color: 'gray' }}>Был в сети: {lastSeen}</span>;
  } else {
    status = <span style={{ color: 'gray' }}>Неизвестно</span>;
  }

  return <div>{status}</div>;
}

Объединим все способы в один компонент:

function UserProfile({ user, isLoading, error }) {
  // 1. Загрузка
  if (isLoading) {
    return <p>Загрузка профиля...</p>;
  }

  // 2. Ошибка
  if (error) {
    return <p style={{ color: 'red' }}>Ошибка: {error}</p>;
  }

  // 3. Нет данных
  if (!user) {
    return <p>Пользователь не найден</p>;
  }

  // 4. Есть данные — показываем профиль
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Возраст: {user.age}</p>
      {user.isPremium && <span>⭐ Премиум-аккаунт</span>}
    </div>
  );
}

Создай компонент UserDashboard, который:

1. Принимает пропсы: user, isLoading, error
2. Если isLoading — показывает текст «Загрузка данных…»
3. Если есть error — показывает «Ошибка: {error}» красным цветом
4. Если user отсутствует — показывает «Пользователь не найден»

Если user есть — показывает:

1. Имя пользователя (заголовок)
2. Email
3. Возраст
4. Если user.isAdmin === true — показывает звёздочку ⭐ рядом с именем
5. Если user.isActive === false — показывает статус «Не активен» серым цветом

Дополнительно: Добавь проверку, что user.age не меньше 0 и не больше 120 (если нет — показывать ошибку валидации).

Проверка: Протестируй все состояния, меняя пропсы в App.jsx.

В следующем уроке разберём Жизненный цикл компонентов — как React управляет созданием, обновлением и удалением компонентов. Ты узнаешь, что происходит с компонентом от момента появления на экране до его исчезновения, и научишься выполнять код в нужные моменты: при монтировании, обновлении и размонтировании.