Чудовий умовний рендеринг з < RenderWhen /> в React

Найбільш поширеною технікою у Реакті є рендеринг за умовою. Зі збільшенням та ускладненням програми, умовні оператори рендерингу можуть стати менш читабельними. У цій статті ми обговоримо, як правильно та легко писати умови у Реакті.

Поширені техніки умовного рендерингу

Ось кілька технік, які використовуються при умовному рендерингу у компонентах React:

Використання &&

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

Використання If/Else оператора

Оператор "if/else" - ще один метод для умовного рендерингу компонентів у React. Однак, це може призводити до складності читання коду, якщо використано безліч таких операторів.

Використання тернарного оператора

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

Написання чистих умов

- це простий та невеликий React компонент, який дозволить вам використовувати умовний рендеринг, що також підвищить читабельність коду та швидкість його написання. Неважливо, потрібно перевірити одну чи кілька умов, ви можете зробити це за допомогою < RenderWhen />.

Компонент < RenderWhen /> працює за принципом операторів "if/else" та "switch/case". Це дозволяє перевірити ланцюжок умов для рендерингу.

У наведеному вище прикладі, код відображає повідомлення в залежності від дня тижня. Остання умова завжди є true, але вона буде рендеритися тільки в тому випадку, якщо всі інші умови не виконуються. Цей принцип роботи виконується точно як оператор default в "switch/case".

Компонент < RenderWhen /> приймає властивість (prop) isTrue, що дозволяє вам виконати вкладені умови. Це означає, що всі дочірні умови (children conditionals) будуть перевірятися тільки в тому випадку, якщо умови, передані в RenderWhen, будуть true.

Будова компонованих веб-додатків

Не будуйте "монолітні" веб-додатки. Використовуйте Bit для створення та компонування роз'єднаних компонентів програмного забезпечення у ваших улюблених фреймворках, таких як React або Node. Будуйте масштабовані та модульні застосунки з потужним та приємним досвідом розробки.

Запросіть свою команду до Bit Cloud, щоб разом організувати роботу та співпрацю над компонентами для прискорення, масштабування та стандартизування розробки в команді. Спробуйте компонований фронтенд з Design System чи Micro Frontends, або досліджуйте компонований бекенд з серверними компонентами.

Джерело: http://surl.li/ikysw
Переклад: Margarita Chigrinets
Редактор: Аліна Берестень
Адміністратор: Дмитро Берестень