Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Передача Даних Через Props у React | Основи React та Компонентно-Орієнтованого Інтерфейсу Користувача
React Mastery

bookПередача Даних Через Props у React

У 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.

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

1. Яке призначення props у React?

2. Яка перевага використання props у React?

question mark

Яке призначення props у React?

Select the correct answer

question mark

Яка перевага використання props у React?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 9

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.17

bookПередача Даних Через Props у React

Свайпніть щоб показати меню

У 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.

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

1. Яке призначення props у React?

2. Яка перевага використання props у React?

question mark

Яке призначення props у React?

Select the correct answer

question mark

Яка перевага використання props у React?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 9
some-alt