Умовне відображення дозволяє динамічно показувати або приховувати елементи на основі певних умов, підвищуючи гнучкість компонентів React. У цьому розділі розглядаються два стандартні методи умовного відображення: оператор && та тернарний оператор.

Умовне відображення з оператором &&

Синтаксис

Оператор && у React використовується для умовного відображення і працює подібно до оператора if у JavaScript. Він дозволяє відображати елементи на основі певних умов.

condition && (<p>element</p>)

Цей підхід часто застосовується, коли потрібно показати елемент лише у випадку, якщо певна умова дорівнює true.

Приклад

Розглянемо приклад, у якому потрібно повідомити студентів, які склали іспит. Якщо бал студента перевищує 60, буде показано повідомлення про успішне складання із зазначенням імені та балу.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

Компонент Notification умовно відображає елемент абзацу <p> залежно від значення пропса mark.

Повний код застосунку

Результат Емілі не відображається, оскільки він менший за 60pts.

Умовне відображення з тернарним оператором

Синтаксис

Умовний рендеринг за допомогою тернарного оператора (? ... : ...) — це ще одна потужна техніка. Вона забезпечує лаконічний спосіб відображення елементів на основі умов.

condition ? (true_element) : (false_element)

Цей підхід підходить, коли потрібно обрати між двома різними елементами залежно від умови.

Приклад

Розглянемо ситуацію, коли потрібно по-різному вітати користувачів залежно від того, чи вони увійшли в систему. Компонент Greeting демонструє умовний рендеринг із використанням тернарного оператора.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

У цьому прикладі компонент Greeting вітає користувачів по-різному залежно від значення пропса loggedIn.

Повний код застосунку