React Props для початківців: перетворення статичних компонентів на шаблони

Розділення інтерфейсу React на компоненти — це лише половина процесу повторного використання. Компонент, який завжди відображає один і той самий текст, є просто одиницею для копіювання та вставки, а не будівельним блоком. Параметри (props) — це механізм, який дозволяє одному компоненту відображати різний контент щоразу, коли він використовується. У цьому посібнику пояснюється, що таке параметри, як дані передаються від батьківського до дочірнього компонента, як читати параметри всередині компонента та які типи значень можна передавати, щоб перетворити жорстко закодовані компоненти на шаблони для повторного використання.

Коли компонент може відображати лише одну річ

Як тільки ви навчитеся створювати компоненти, типова структура додатку виглядатиме приблизно так: кореневий компонент App відображає кілька розділів:

App
│
├── Navbar
├── Hero
├── Features
├── Footer

Тепер уявіть картку товару в інтернет-магазині. Вона відображає назву, ціну, оцінку та кнопку купівлі:

-------------------------
📱 iPhone 16

₹79,999
⭐⭐⭐⭐⭐
Buy Now
-------------------------

Потім з’являється вимога: показати 500 продуктів. Як є зараз, карточка може показати лише один телефон за ціною, тож для ноутбуків, навушників та годинників знадобиться майже ідентичний елемент, що суперечить сенсу використання компонентів. Потрібно зберегти фіксовану структуру, водночас подаючи кожного разу різні дані. Саме для цього існують пропси.

Що таке пропси

„Пропси“ — це скорочення від properties. Це значення, які батьківський компонент передає дочірньому компоненту під час його відображення. Компонент визначає структуру та стиль; пропси надають деталі, які роблять кожну інстанцію унікальною.

Допоможе аналогія з кухнею. Піцерія не вигадує новий рецепт для кожного замовлення. У неї є один рецепт, а для кожного замовлення надходять різні інструкції: додатковий сир, гриби, оливки, кукурудза. Рецепт — це компонент, а добавки — пропси.

Іншими словами, компонент виступає як шаблон, а пропси заповнюють порожні місця. Замість створення окремої картки, яка завжди показує одне й те саме, як у цьому прикладі:

Product Card
iPhone

ви створюєте одну універсальну картку продукту та передаєте їй різні дані там, де вона використовується.

Батьки, діти та однонапрямковий потік даних

Пропси мають сенс лише у контексті взаємозв’язку між компонентами. Кожен React-додаток — це дерево, у якому деякі компоненти відображають інші:

App
│
├── Navbar
├── Hero
├── ProductCard
└── Footer

Тут App є батьківським компонентом, а Navbar, Hero, ProductCard та Footer — його дочірніми компонентами. Батьківський компонент вирішує, які дочірні компоненти відображати, а також може надавати кожному з них інформацію. Ця інформація є його пропсами.

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

App
│
│   title
│   price
│   rating
▼
ProductCard

Дочірній компонент отримує title, price та rating, але не може надсилати нові значення назад через свої props. З точки зору дочірнього компонента props також є лише для читання. Компонент ніколи не повинен змінювати props, які він отримує; якщо щось потребує змін з часом, це має знаходитися у стані, який зазвичай належить батьківському компоненту. Коли дочірній компонент потребує передати якусь інформацію нагору, наприклад про клік, батьківський компонент передає йому функцію як prop, і дочірній компонент її викликає. Оскільки дані передаються лише в одному напрямку, завжди можна простежити походження значення, йдучи вгору по дереву компонентів, що значно полегшує пошук помилок.

Ваш перший компонент з props

Почніть із компонента, який вітає когось за ім’ям. Він приймає параметр під назвою props та читає props.name усередині свого JSX:

function Welcome(props) {
  return (
    <h1>Hello, {props.name}</h1>
  );
}

export default Welcome;

Батьківський елемент його відображає та передає ім’я як атрибут:

import Welcome from "./Welcome";

function App() {
  return (
    <>
      <Welcome name="Ayush" />
    </>
  );
}
export default App;

Результат відображення є таким:

Hello, Ayush

Що робить кожна частина синтаксису

Передача пропсів схожа на написання атрибуту HTML у тегу компонента:

<Welcome name="Ayush" />

Корисно уявляти це як виклик функції з аргументами. З боку отримувача компонент є функцією, першим параметром якої є пропси:

function Welcome(props)

React збирає всі атрибути, які ви написали у тегу, у єдиний звичайний об’єкт та передає його як цей параметр. Отримання значення — це звичайний доступ до властивостей:

props.name

Оскільки батьківський елемент передав цей атрибут:

name="Ayush"

компонент відображає:

Hello, Ayush

Ім’я props є лише умовною назвою. У багатьох кодових базах його розбирають у списку параметрів, як у function Welcome({ name }).

Передача кількох props одночасно

Справжні компоненти зазвичай потребують більше ніж одного значення. Ви можете додати стільки атрибутів, скільки бажаєте. Зауважте, що рядки можна записувати в лапках, тоді як числа та інші значення JavaScript потрібно розміщувати всередині круглих дужок. У наведеному нижче фрагменті відсутня пробіл між ім’ям компонента та першим атрибутом; його слід записувати як <Welcome name=...:

<Welcomename="Ayush"
    company="OpenAI"
    experience={6}
/>

Компонент зчитує кожен prop за ім’ям:

function Welcome(props) {

return (
    <>
      <h2>{props.name}</h2>
      <p>{props.company}</p>
      <p>{props.experience} Years</p>
    </>
  );
}

І відображає:

Ayush
OpenAI
6 Years

Змінивши props, той самий компонент відображає зовсім іншу інформацію.

Багаторазово використовувана картка продукту

Повернення до магазину. Тепер картка отримує свою назву, ціну та оцінку з параметрів, а не через жорстке прописування цих даних:

function ProductCard(props) {
return (
    <div>
      <h2>{props.title}</h2>
      <p>₹ {props.price}</p>
      <p>{props.rating}</p>
    </div>
  );
}
export default ProductCard;

Батьківський компонент може відображати стільки карток, скільки потрібно, причому кожна з них має власні дані. Ціна передається у вигляді числа всередині фігурних дужок, тоді як назва та оцінка — у вигляді рядків:

<ProductCard
title="iPhone 16"
price={79999}
rating="⭐⭐⭐⭐⭐"
/>
<ProductCard
title="Samsung S25"
price={68999}
rating="⭐⭐⭐⭐"
/>
<ProductCard
title="MacBook Air"
price={99999}
rating="⭐⭐⭐⭐⭐"
/>

Один компонент, три різні продукти, без дублювання маркапу. Для 500 продуктів ви також не будете вручну писати 500 тегів: дані надходитимуть з масиву, і картки відображатимуться за допомогою products.map(...), причому поля кожного елемента передаватимуться як параметри, а кожній картці буде присвоєно унікальне key.

Чому параметри дозволяють повторне використання

Без параметрів магазину потрібен окремий компонент для кожного продукту:

ProductCard1
ProductCard2
ProductCard3
ProductCard4
ProductCard5

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

ProductCard
↓
Different Product Data
↓
Multiple Cards

Один файл визначає структуру картки; її екземпляри відрізняються лише даними. Це основний принцип великих React-додатків та систем дизайну.

Уявіть стандартну форму додатку: усі заповнюють однакові поля — ім’я, вік та адресу — але з різними деталями. Порожня форма — це компонент; дані, які вводяться, — це пропси.

Які типи значень можна передавати

Пропси не обмежуються текстом. Можна передавати будь-яке значення JavaScript. Для рядків можна використовувати лапки:

name="Ayush"

Числа вказуються у круглих дужках, тож React отримує справжнє число, а не рядок „26“:

age={26}

Для булевих значень також використовуються дужки:

isAdmin={true}

Можна передати значення змінної:

name={username}

Або результат будь-якого виразу, який обчислюється перед тим, як він надійде до дочірнього елемента:

price={500 + 200}

Масиви, об’єкти та функції можна передавати таким самим способом, всередині дужок. Функції як пропси — це засіб, за допомогою якого дочірні елементи повідомляють батьківські про події, а спеціальний пропс під назвою children дозволяє компоненту обгорнути будь-який маркап, розміщений між його початковою та кінцевою тегами.

Значення, закодовані жорстко, проти пропсів

Порівняйте заголовок, закодований жорстко:

<h2>iPhone 16</h2>

з заголовком, який формується за допомогою пропса:

<h2>{props.title}</h2>

Перший може відображати лише один продукт; другий — будь-яку кількість. Кожного разу, коли ви починаєте вводити конкретний контент у компонент, призначений для повторного використання, запитайте себе, чи не краще зробити цей контент параметром. Уникайте протилежного крайнощу: перетворення кожної дрібниці на параметр ускладнює використання компонентів, тому відображайте лише те, що справді змінюється під час різних використань.

Щоб ознайомитися зі структурою самих компонентів, перегляньте React components 101.

Основні висновки

• Параметри, скорочено prop, — це значення, які батьківський компонент передає дочірньому під час його відображення.
• Дані передаються лише в одному напрямку — від батьківського до дочірнього компонента, і дочірні компоненти розглядають параметри як тільки для читання.

React збирає всі атрибути в тегу компонента в один об’єкт props, який передається як перший аргумент функції.

Для рядків можна використовувати лапки; числа, логічні значення, змінні та вирази розміщуються всередині круглих дужок.

Один компонент із різними атрибутами замінює багато майже ідентичних компонентів.

Наступними логічними кроками є розбирання атрибутів, передача об’єктів, масивів та функцій-обернень, використання значень за замовчуванням та атрибута children.