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

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

Синтаксис

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

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

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

Приклад

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

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

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

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

Результат Emily не відображається, оскільки він менший за 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.

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

Примітка

Хоча обидві техніки забезпечують умовний рендеринг, важливо розуміти їх відмінності. Оператор && ідеально підходить, коли потрібно відобразити елемент лише за виконання певної умови. Натомість тернарний оператор доцільний у випадках, коли необхідно обрати між двома різними елементами залежно від умови.