Передача Даних Через 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?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.17
Передача Даних Через 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?
Дякуємо за ваш відгук!