Условный рендеринг — это фундаментальная концепция React, которая позволяет динамически отображать или скрывать компоненты в зависимости от определённых условий. Это похоже на условные конструкции if или тернарный оператор в JavaScript, но с учётом особенностей React. Сегодня мы разберёмся, как реализовать условный рендеринг и создадим компонент, который приветствует только авторизованных пользователей.

Как работает условный рендеринг в React?

В React всё вращается вокруг компонентов, которые возвращают JSX. Чтобы условно отображать части интерфейса, вы можете использовать стандартные инструменты JavaScript: if, тернарный оператор (? :), и логическое &&. Давайте рассмотрим каждый из них.

Использование if

Если у вас сложная логика, вы можете использовать if для определения, что отображать:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Добро пожаловать!</h1>;
  } else {
    return <h1>Пожалуйста, войдите в систему</h1>;
  }
}

Как это работает: Функция проверяет значение isLoggedIn и возвращает нужный JSX.

Когда использовать: if подходит для сложных условий или когда есть много разных веток кода.

Тернарный оператор

Если условие простое, используйте тернарный оператор. Он позволяет писать более компактный код:

function Greeting({ isLoggedIn }) {
  return <h1>{isLoggedIn ? 'Добро пожаловать!' : 'Пожалуйста, войдите в систему'}</h1>;
}

Как это работает: Если isLoggedIn равен true, отображается текст «Добро пожаловать!». В противном случае — «Пожалуйста, войдите в систему».

Когда использовать: Тернарный оператор идеален для коротких и простых условий.

Логическое &&

Иногда вы хотите отобразить что-то, только если условие истинно. В этом случае пригодится оператор &&:

function AdminPanel({ isAdmin }) {
  return (
    <div>
      {isAdmin && <button>Удалить пользователя</button>}
    </div>
  );
}

Как это работает: Если isAdmin истинно, React рендерит кнопку. Если ложно — ничего не отображается.

Когда использовать: Логическое && хорошо подходит для случаев, когда отображается только один элемент, если условие истинно.

Практика: компонент приветствия для авторизованных пользователей

Давайте создадим компонент, который:

• Показывает «Добро пожаловать, [имя пользователя]!» для авторизованных пользователей.
• Показывает «Пожалуйста, войдите в систему» для гостей.
• Добавим кнопку «Войти/Выйти», чтобы пользователь мог менять своё состояние.

Шаг 1: Инициализация состояния

В компоненте App мы будем хранить состояние авторизации. Используем хук useState:

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false); // По умолчанию пользователь не авторизован
  const [username, setUsername] = useState('Иван'); // Имя пользователя

  const toggleLogin = () => {
    setIsLoggedIn(!isLoggedIn); // Переключаем состояние
  };

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} username={username} />
      <button onClick={toggleLogin}>
        {isLoggedIn ? 'Выйти' : 'Войти'}
      </button>
    </div>
  );
}

Шаг 2: Создание компонента Greeting

Создадим компонент, который отображает приветствие на основе состояния авторизации:

function Greeting({ isLoggedIn, username }) {
  if (isLoggedIn) {
    return <h1>Добро пожаловать, {username}!</h1>;
  }
  return <h1>Пожалуйста, войдите в систему</h1>;
}

Шаг 3: Объединяем всё вместе

Вот итоговый код:

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState('Иван');

  const toggleLogin = () => {
    setIsLoggedIn(!isLoggedIn);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <Greeting isLoggedIn={isLoggedIn} username={username} />
      <button
        onClick={toggleLogin}
        style={{
          padding: '10px 20px',
          fontSize: '16px',
          backgroundColor: isLoggedIn ? '#f44336' : '#4CAF50',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
          marginTop: '20px',
        }}
      >
        {isLoggedIn ? 'Выйти' : 'Войти'}
      </button>
    </div>
  );
}

function Greeting({ isLoggedIn, username }) {
  if (isLoggedIn) {
    return <h1>Добро пожаловать, {username}!</h1>;
  }
  return <h1>Пожалуйста, войдите в систему</h1>;
}

export default App;

Шаг 4: Запуск приложения

Откройте терминал и запустите приложение:

npm run dev

В браузере вы увидите приветствие и кнопку «Войти».

Нажмите на кнопку — состояние изменится, и появится сообщение «Добро пожаловать, Иван!». Нажмите снова — компонент переключится обратно на «Пожалуйста, войдите в систему».

Дополнительное задание: добавьте условный стиль

Давайте добавим стиль, который меняется в зависимости от авторизации:

function Greeting({ isLoggedIn, username }) {
  const greetingStyle = {
    color: isLoggedIn ? 'green' : 'gray',
  };

  return (
    <h1 style={greetingStyle}>
      {isLoggedIn ? `Добро пожаловать, ${username}!` : 'Пожалуйста, войдите в систему'}
    </h1>
  );
}

Теперь текст будет зелёным для авторизованных пользователей и серым для гостей.

Итоги

Условный рендеринг — мощный инструмент в React, который позволяет адаптировать интерфейс к состоянию приложения. Сегодня мы узнали:

• Как использовать if, тернарный оператор и логическое && для отображения компонентов.
• Когда лучше использовать каждый из этих методов.
• Как создать компонент с условным рендерингом на практике.

Мы создали приложение, которое приветствует авторизованных пользователей и позволяет переключать их состояние.