У React пропси (скорочення від англ. properties - властивості) є потужним механізмом для кастомізації та передачі даних від батьківського до дочірнього компонента. Ця функція дозволяє нам створювати багаторазові та гнучкі компоненти в додатку.

Передача пропсів

Уявіть, що ми створюємо інтернет-магазин.

У цьому сценарії у нас є головний компонент під назвою App, і ми хочемо відобразити інформацію про товар за допомогою компонента Product. Ми можемо передати назву та ціну товару як пропси з App до Product.

Ось як це робиться на практиці:

// Parent Component (App)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

У компоненті App ми включаємо компонент Product і передаємо йому пропси: name зі значенням "Green iguana" і price зі значенням 579.

Отримання та використання пропсів

Тепер давайте розглянемо компонент Product, який отримує ці пропси:

// Child Component (Product)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

У компоненті Product ми визначаємо його як такий, що приймає єдиний аргумент під назвою props. Усередині компонента ми можемо отримати доступ до значень цих пропсів за допомогою крапки (.), за якою слідує ім'я властивості (наприклад, props.name і props.price).

Практичне використання

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

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

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

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