Пошук уроків, статей та іншого контенту
Передаватимете дані від батьківського компонента до дочірнього за допомогою props і відображатимете їх у JSX.
props — це об’єкт із даними, які батьківський компонент передає дочірньому компоненту.
За допомогою props компоненти можуть бути повторно використаними. Наприклад, один компонент UserCard може відображати дані різних користувачів:
ім’я;
вік;
роль;
зображення;
інші значення.
Схема передавання даних виглядає так:
батьківський компонент → дочірній компонентДані передаються під час використання дочірнього компонента як JSX-атрибути.
Створімо компонент Greeting
namefunction Greeting(props) {
return <h1>Привіт, {props.name}!</h1>;
}
function App() {
return (
<main>
<Greeting name="Олена" />
<Greeting name="Андрій" />
</main>
);
}У цьому прикладі:
App — батьківський компонент;
Greeting — дочірній компонент;
name="Олена" і name="Андрій" — передані props;
props.name — доступ до значення всередині Greeting.
У результаті на сторінці буде:
Привіт, Олена!
Привіт, Андрій!Один і той самий компонент можна використовувати багато разів із різними даними.
Параметр функціонального компонента містить об’єкт props.
function UserCard(props) {
return (
<article>
<h2>{props.name}</h2>
<p>Вік: {props.age}</p>
</article>
);
}
function App() {
return <UserCard name="Марія" age={25} />;
}Всередині UserCard об’єкт props має приблизно такий вигляд:
{
name: "Марія",
age: 25
}Зверніть увагу на запис значень:
<UserCard name="Марія" />Рядок можна передати без фігурних дужок.
<UserCard age={25} />Число передається у фігурних дужках. Фігурні дужки потрібні, щоб передати JavaScript-вираз.
Через props можна передавати не лише рядки, а й числа, булеві значення, масиви та об’єкти.
function ProductCard(props) {
return (
<article>
<h2>{props.title}</h2>
<p>Ціна: {props.price} грн</p>
<p>{props.isAvailable ? "Товар є в наявності" : "Товару немає"}</p>
</article>
);
}
function App() {
return (
<ProductCard
title="Навушники"
price={1499}
isAvailable={true}
/>
);
}Значення true і false передаються у фігурних дужках:
<ProductCard isAvailable={true} />Для true є скорочений запис:
<ProductCard isAvailable />Це те саме, що:
<ProductCard isAvailable={true} />Однак такий запис:
<ProductCard price="1499" />передає рядок "1499", а не число 1499.
Якщо компонент має виконувати математичні операції з ціною, краще передавати число:
<ProductCard price={1499} />Замість звертання до кожного значення через props.name можна одразу деструктурувати об’єкт параметрів.
Було:
function UserCard(props) {
return (
<article>
<h2>{props.name}</h2>
<p>Вік: {props.age}</p>
</article>
);
}З деструктуризацією:
function UserCard({ name, age }) {
return (
<article>
<h2>{name}</h2>
<p>Вік: {age}</p>
</article>
);
}Обидва варіанти працюють однаково. Деструктуризація часто робить JSX коротшим і зрозумілішим.
Нижче наведено повний приклад із батьківським компонентом App і дочірнім компонентом UserCard.
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
function UserCard({ name, role, isOnline }) {
return (
<article className="user-card">
<h2>{name}</h2>
<p>{role}</p>
<p className={isOnline ? "online" : "offline"}>
{isOnline ? "Онлайн" : "Офлайн"}
</p>
</article>
);
}
function App() {
return (
<main>
<h1>Команда</h1>
<UserCard
name="Олена"
role="Frontend Developer"
isOnline={true}
/>
<UserCard
name="Андрій"
role="Backend Developer"
isOnline={false}
/>
</main>
);
}
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);Компонент App передає кожній картці власні значення:
<UserCard
name="Олена"
role="Frontend Developer"
isOnline={true}
/>А компонент UserCard отримує ці значення та відображає їх:
function UserCard({ name, role, isOnline }) {
// Компонент використовує дані, отримані через props
return (
<article>
<h2>{name}</h2>
<p>{role}</p>
<p>{isOnline ? "Онлайн" : "Офлайн"}</p>
</article>
);
}Props призначені для читання. Дочірній компонент не повинен змінювати їх напряму.
Неправильно:
function UserCard(props) {
props.name = "Інше ім’я";
return <h2>{props.name}</h2>;
}Правильно — використати значення props без зміни:
function UserCard({ name }) {
return <h2>{name}</h2>;
}Якщо компоненту потрібно змінювати дані під час роботи, для цього використовують стан компонента. Props при цьому залишаються вхідними даними, які передав батьківський компонент.
Іноді батьківський компонент може не передати певний prop. Для таких випадків можна вказати значення за замовчуванням під час деструктуризації.
function Button({ text = "Натиснути" }) {
return <button type="button">{text}</button>;
}
function App() {
return (
<div>
<Button text="Зберегти" />
<Button />
</div>
);
}Перший компонент покаже кнопку Зберегти, а другий — кнопку Натиснути.
Щоб вставити значення props у JSX, використовуйте фігурні дужки:
function Greeting({ name, age }) {
return (
<p>
Користувача звати {name}, йому {age} років.
</p>
);
}У JSX можна вставляти JavaScript-вирази:
function Price({ value }) {
return <p>Ціна зі знижкою: {value * 0.9} грн</p>;
}Не можна вставляти JavaScript-інструкції на кшталт if безпосередньо всередину JSX. Для умовного відображення використовуйте тернарний оператор або підготуйте значення до return.
function Status({ isOnline }) {
const message = isOnline ? "Користувач онлайн" : "Користувач офлайн";
return <p>{message}</p>;
}Неправильно:
function Greeting(props) {
return <h1>Привіт, props.name!</h1>;
}У цьому випадку React сприйме весь текст як звичайний рядок.
Правильно:
function Greeting(props) {
return <h1>Привіт, {props.name}!</h1>;
}Або з деструктуризацією:
function Greeting({ name }) {
return <h1>Привіт, {name}!</h1>;
}<ProductCard price="1000" />Тут price має тип string.
Якщо потрібне число, використовуйте:
<ProductCard price={1000} />Батьківський компонент передає prop userName:
<UserCard userName="Олена" />А дочірній очікує name:
function UserCard({ name }) {
return <h2>{name}</h2>;
}У такому випадку name буде undefined. Назви props у батьківському та дочірньому компонентах мають збігатися:
function UserCard({ userName }) {
return <h2>{userName}</h2>;
}Props не слід змінювати всередині дочірнього компонента. Компонент має використовувати отримані значення для відображення інтерфейсу.
Створіть компонент BookCard, який отримує через props:
title — назву книги;
author — автора;
year — рік видання;
isRead — булеве значення, чи прочитана книга.
Компонент має відображати:
назву книги;
автора;
рік видання;
текст Прочитано або Ще не прочитано.
Приклад використання:
<BookCard
title="Кобзар"
author="Тарас Шевченко"
year={1840}
isRead={true}
/>Один із можливих варіантів компонента:
function BookCard({ title, author, year, isRead }) {
return (
<article>
<h2>{title}</h2>
<p>Автор: {author}</p>
<p>Рік видання: {year}</p>
<p>{isRead ? "Прочитано" : "Ще не прочитано"}</p>
</article>
);
}Props — це дані, які батьківський компонент передає дочірньому.
Props передаються як атрибути JSX-компонента.
Усередині компонента props доступні як параметр функції.
Значення props можна отримувати через props.name або деструктуризацію.
Рядки можна передавати без фігурних дужок, а числа, булеві значення та вирази — у фігурних дужках.
Props призначені для читання, їх не можна змінювати в дочірньому компоненті.
Один компонент можна використовувати багато разів із різними props.