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

Умовний рендеринг з оператором &&

Синтаксис

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

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

Приклад

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

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

Повний код програми

Результат Емілі не показано, оскільки він менший за 60pts.

Умовний рендеринг з тернарним оператором

Синтаксис

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

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

Приклад

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

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

Повний код програми

Примітка

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