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

Передача props

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

У цьому прикладі маємо головний компонент під назвою 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.

Повний код застосунку: