Пошук уроків, статей та іншого контенту
Як передавати дані від батьківського компонента до дочірнього — і чому props незмінні.
Props (скорочено від properties) — спосіб передати дані від батьківського компонента до дочірнього, так само як аргументи передаються у функцію. React збирає всі атрибути, вказані при використанні компонента, в один об'єкт і передає його першим (і єдиним) аргументом функції-компонента.
function Greeting(props) {
return <h1>Привіт, {props.name}!</h1>;
}
// Використання:
<Greeting name="Оксана" />
// props тут дорівнює { name: "Оксана" }Найпоширеніший стиль — одразу деструктуризувати потрібні поля прямо в параметрах функції:
function Greeting({ name }) {
return <h1>Привіт, {name}!</h1>;
}Props передаються в одному напрямку — від батька до дитини — і дочірній компонент не має їх змінювати. Якщо дочірньому компоненту потрібно «повідомити» батьківському про зміну (наприклад, натискання кнопки), для цього передають функцію-колбек як ще один prop, а не мутують отримані дані напряму.
function LikeButton({ likesCount, onLike }) {
// Неправильно: likesCount++ — props незмінні
return <button onClick={onLike}>👍 {likesCount}</button>;
}
function Post() {
const [likes, setLikes] = useState(0);
return <LikeButton likesCount={likes} onLike={() => setLikes(likes + 1)} />;
}Деструктуризація параметрів дозволяє одразу задати значення за замовчуванням для необов'язкових props:
function Avatar({ size = 40, src, alt }) {
return <img src={src} alt={alt} width={size} height={size} />;
}
<Avatar src="/me.jpg" alt="Мій аватар" /> // size буде 40, якщо не вказано явноУсе, що вказано між відкривним і закривним тегом компонента, React передає як спеціальний prop під назвою children. Це основа для компонентів-обгорток — картки, модального вікна, макета сторінки — які не знають заздалегідь, що саме буде всередині:
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
{children}
</div>
);
}
<Card title="Профіль">
<p>Тут може бути будь-який вміст.</p>
<button>Редагувати</button>
</Card>Мутація props усередині дочірнього компонента — React не відстежує такі зміни, тож інтерфейс не оновиться синхронно з даними, а сам підхід ламає односпрямований потік даних, на якому побудований React.
Передавати десятки окремих props замість згрупованого об'єкта — <UserCard name={u.name} email={u.email} avatar={u.avatar} ... /> варто замінити на <UserCard user={u} />, коли полів багато й вони логічно пов'язані.
Забувати про children при проєктуванні обгорткових компонентів — і замість гнучкого <Card>{...}</Card> отримувати негнучкий <Card content={...} /> з обмеженим набором того, що можна передати.
Props — механізм передачі даних від батьківського компонента до дочірнього, аналогічний аргументам функції. Вони незмінні з погляду дочірнього компонента — щоб «повідомити» батьківському про подію, передають функцію-колбек як окремий prop. Спеціальний prop children несе вміст між відкривним і закривним тегом компонента й лежить в основі гнучких компонентів-обгорток.