Динамічні компоненти в React забезпечують гнучкість, дозволяючи рендерити різні компоненти залежно від даних і випадків використання. Однак забезпечити відповідність типів props для цих компонентів може бути складно, особливо при роботі в середовищі TypeScript.
У цій статті ми розглянемо два питання:
- Як рендерити різні компоненти на основі однакової логіки.
- Як забезпечити безпеку типів під час рендерингу різних компонентів.
Давайте почнемо з прикладу:
Припустимо, у нас є два елементи списку: один — AuthorItem, а інший — BookItem. Обов’язки обох компонентів — рендерити елемент, але дані в них різні.
Обидва компоненти рендерять список елементів, але кожен елемент має різні дані. Замість того, щоб повторювати код для відображення елементів масиву, ми можемо створити багаторазовий компонент RegularList. Цей компонент буде обробляти логіку ітерації та рендерингу — нам просто потрібно передати дані (items) і компонент (Comp) для рендерингу.
Тепер не потрібно знову і знову писати логіку мапінгу. Ви можете додавати нескінченний скролінг, анімації в RegularList і рендерити будь-який елемент списку, не повторюючи код, просто передаючи props.
Тут ми вирішили першу проблему. Але як щодо безпеки типів? Тут ми можемо передавати будь-який компонент, будь-які елементи та sourceName, і це не дасть нам жодної помилки. Наприклад, ми можемо передати BookItem в props компонента і в items передати authorItems з ім’ям джерела author.
Щоб забезпечити безпеку типів, ми будемо використовувати ComponentProps, який приймає тип React-компонента і повертає тип об’єкта props для цього компонента. Це корисно для динамічного роботи з props різних компонентів. Давайте подивимось, як це працює в компоненті RegularList.
У RegularList за допомогою generics і ComponentProps. Спочатку ми беремо компонент, а потім передаємо тип компонента в ComponentProps, що повертає тип props, за допомогою якого ми можемо отримати всі ключі props з нього, які будуть типом sourceName, і цей тип sourceName буде використаний у типі items як масив.
Зробивши це, тепер ми не можемо передавати будь-який пропс — props повинні бути дійсними.
Тепер можна передавати лише компоненти з правильними props. У BookItem немає пропсу author, тому виникає помилка.
Навіть якщо ви виправите sourceName, але елементи не відповідатимуть типу props книги, помилка все одно з’явиться.
Використовуючи ComponentProps для динамічного рендерингу компонентів, ми можемо забезпечити безпеку типів. Це полегшить процес розробки та зменшить кількість помилок на етапі виконання.
Це був мій перший блог. Сподіваюся, він вам сподобався! Не соромтеся залишати коментарі, якщо у вас є питання.
Перекладено з: Reusable React List Component with Strong Type Safety