Пошук уроків, статей та іншого контенту
Застосуєте деструктуризацію props і значення за замовчуванням, щоб зробити код компонентів коротшим і надійнішим.
propsprops — це об’єкт із даними, які батьківський компонент передає дочірньому.
function UserCard(props) {
return (
<article>
<h2>{props.name}</h2>
<p>Вік: {props.age}</p>
</article>
);
}
function App() {
return <UserCard name="Олена" age={28} />;
}У компоненті UserCard ми звертаємося до кожного значення через props.name і props.age.
Коли властивостей стає багато, такий запис може бути громіздким:
function ProductCard(props) {
return (
<article>
<h2>{props.title}</h2>
<p>Ціна: {props.price} грн</p>
<p>Категорія: {props.category}</p>
</article>
);
}Деструктуризація допомагає отримати потрібні властивості без постійного написання props..
Замість отримання всього об’єкта props можна одразу деструктуризувати його в параметрах функції:
function ProductCard({ title, price, category }) {
return (
<article>
<h2>{title}</h2>
<p>Ціна: {price} грн</p>
<p>Категорія: {category}</p>
</article>
);
}Тепер компонент одразу отримує окремі змінні:
title;
price;
category.
Використання компонента не змінюється:
<ProductCard
title="Клавіатура"
price={2500}
category="Аксесуари"
/>Деструктуризація не змінює передані дані. Вона лише робить доступ до них зручнішим.
Один і той самий компонент можна записати двома способами.
propsfunction Greeting(props) {
return (
<p>
Привіт, {props.name}! Твоя роль: {props.role}.
</p>
);
}function Greeting({ name, role }) {
return (
<p>
Привіт, {name}! Твоя роль: {role}.
</p>
);
}Другий варіант зазвичай коротший і зручніший для компонентів, які використовують кілька конкретних props.
Іноді батьківський компонент може не передати певну властивість. У такому разі можна задати значення за замовчуванням під час деструктуризації:
function Button({ label = "Натиснути" }) {
return <button>{label}</button>;
}Якщо label передано, компонент використає це значення:
<Button label="Зберегти" />На екрані буде кнопка з текстом Зберегти.
Якщо label не передано:
<Button />буде використано значення за замовчуванням — Натиснути.
Значення за замовчуванням також можна задати для кількох props:
function UserCard({
name = "Невідомий користувач",
role = "Гість",
isOnline = false,
}) {
return (
<article>
<h2>{name}</h2>
<p>Роль: {role}</p>
<p>{isOnline ? "У мережі" : "Не в мережі"}</p>
</article>
);
}import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
function ProductCard({
name = "Товар без назви",
price = 0,
category = "Без категорії",
inStock = false,
}) {
return (
<article>
<h2>{name}</h2>
<p>Категорія: {category}</p>
<p>Ціна: {price} грн</p>
<p>{inStock ? "Є в наявності" : "Немає в наявності"}</p>
</article>
);
}
function App() {
return (
<main>
<h1>Каталог товарів</h1>
<ProductCard
name="Навушники"
price={1800}
category="Аудіо"
inStock={true}
/>
<ProductCard
name="Вебкамера"
price={3200}
category="Відео"
/>
<ProductCard />
</main>
);
}
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>,
);У цьому прикладі:
props деструктуризуються прямо в параметрах ProductCard;
для кожної властивості задано значення за замовчуванням;
перший компонент отримує всі props;
другий не отримує inStock, тому використовується false;
третій не отримує жодного prop, тому компонент використовує всі значення за замовчуванням.
undefinedЗначення за замовчуванням використовується, якщо prop має значення undefined або взагалі не переданий:
function Message({ text = "Повідомлення відсутнє" }) {
return <p>{text}</p>;
}
function App() {
return (
<>
<Message />
<Message text={undefined} />
<Message text="" />
</>
);
}Результат:
для першого компонента буде Повідомлення відсутнє;
для другого також буде Повідомлення відсутнє;
для третього буде порожній текст, тому що порожній рядок "" — це не undefined.
null також не замінюється значенням за замовчуванням:
function Title({ text = "Заголовок" }) {
return <h2>{text}</h2>;
}
<Title text={null} />;У цьому випадку text дорівнює null, а не "Заголовок".
propsДеструктуризацію можна виконати не лише в параметрах функції, а й усередині компонента:
function Profile(props) {
const { name, email } = props;
return (
<section>
<h2>{name}</h2>
<p>{email}</p>
</section>
);
}Якщо потрібні значення за замовчуванням, їх можна вказати під час деструктуризації:
function Profile(props) {
const {
name = "Без імені",
email = "Email не вказано",
} = props;
return (
<section>
<h2>{name}</h2>
<p>{email}</p>
</section>
);
}Для простих компонентів деструктуризація в параметрах зазвичай компактніша:
function Profile({
name = "Без імені",
email = "Email не вказано",
}) {
return (
<section>
<h2>{name}</h2>
<p>{email}</p>
</section>
);
}Обидва варіанти працюють однаково. Обирайте той, який робить компонент зрозумілішим.
Під час деструктуризації можна зберегти prop під іншою назвою:
function User({ name: userName }) {
return <p>Користувач: {userName}</p>;
}Тут:
name — назва prop;
userName — локальна змінна в компоненті.
Можна одночасно перейменувати властивість і задати значення за замовчуванням:
function User({ name: userName = "Невідомий користувач" }) {
return <p>Користувач: {userName}</p>;
}Цей синтаксис варто використовувати лише тоді, коли нова назва справді робить код зрозумілішим.
propsДеструктуризація зручна, якщо компонент використовує конкретні властивості. Але інколи потрібно передати весь об’єкт далі або опрацювати його як єдиний об’єкт:
function DebugPanel(props) {
return <pre>{JSON.stringify(props, null, 2)}</pre>;
}Не обов’язково деструктуризувати всі props. Обирайте форму, яка найкраще відповідає завданню компонента.
Якщо prop не вказаний у деструктуризації, змінної з такою назвою в компоненті не буде:
function Product({ name }) {
return (
<article>
<h2>{name}</h2>
{/* Помилка: price не визначено */}
<p>{price} грн</p>
</article>
);
}Потрібно додати price:
function Product({ name, price }) {
return (
<article>
<h2>{name}</h2>
<p>{price} грн</p>
</article>
);
}Значення за замовчуванням задається через =, а не через ::
// Правильно
function Button({ label = "Натиснути" }) {
return <button>{label}</button>;
}Двокрапка використовується для перейменування властивості:
function Button({ label: buttonLabel }) {
return <button>{buttonLabel}</button>;
}Різні типи props передаються по-різному:
<ProductCard
name="Монітор"
price={7000}
inStock={true}
/>Рядок передається в лапках, а число та булеве значення — у фігурних дужках.
Такий запис передасть рядок "7000", а не число:
<ProductCard price="7000" />null використає значення за замовчуваннямfunction Avatar({ imageUrl = "/default-avatar.png" }) {
return <img src={imageUrl} alt="Аватар" />;
}
<Avatar imageUrl={null} />;У цьому випадку imageUrl буде null. Значення за замовчуванням застосовується лише для undefined.
props — це об’єкт із даними, переданими компоненту.
Деструктуризація дозволяє отримати props як окремі змінні.
Деструктуризацію можна виконати в параметрах функції або всередині компонента.
Значення за замовчуванням задаються через =.
Значення за замовчуванням використовуються для undefined, але не для null.
Props можна перейменовувати під час деструктуризації.
Передавайте числа, булеві значення та інші вирази у фігурних дужках.
Деструктуризуйте лише ті props, які справді потрібні компоненту.