Головна / Статті / Перетворення React-атрибутів з характеристик на дочірні елементи

react typescript props frontend beginners

Перетворення React-атрибутів з характеристик на дочірні елементи

Передавайте дані як атрибути HTML, вказуйте типи пропсів у TypeScript, безпечно розбирайте структуру даних та зберігайте пропси у режимі лише для читання.

1068 слів

Propи у React з TypeScript (стартовий проєкт 2026)

У серії «Restarting React», орієнтованій на React 19.2 та TypeScript, сумісний із компілятором, початковий варіант ProductCard мав недолік: поля продукту знаходилися всередині компонента. Для повторного використання потрібні propи — дані, які передаються від батьківських компонентів, подібно до атрибутів HTML.

Передавання propів як атрибутів

function ProductCard() {
  const product = { name: 'Mechanical Keyboard', price: 89000 }; // fixed
  return <h2>{product.name}</h2>;
}

// receiving side
function ProductCard(props) {
  return <h2>{props.name}</h2>;
}

Батьківський компонент володіє даними; дочірній компонент їх відображає.

Типування propів

Визначте інтерфейс (або тип) для об’єкта propів:

// passing side
<ProductCard name="Mechanical Keyboard" />
<ProductCard name="Wireless Mouse" />

type ProductCardProps = {
  name: string;
  price: number;
};

Компілятор виявляє відсутні поля та неправильні типи ще до запуску програми.

Розбирання структури для чіткості

function ProductCard(props: ProductCardProps) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>{props.price.toLocaleString()} won</p>
    </div>
  );
}

<ProductCard name="Keyboard" price={89000} />      // ✅ OK
<ProductCard name="Keyboard" />                     // 🔴 missing price — error
<ProductCard name="Keyboard" price="89000" />       // 🔴 price is a string — error

Зберігайте тип propів у параметрі функції, щоб розбирання структури залишалося типованим.

Необов’язкові propи та значення за замовчуванням

type ProductCardProps = {
  name: string;
  price: number;
};

// drop the props. and pull values out directly
function ProductCard({ name, price }: ProductCardProps) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{price.toLocaleString()} won</p>
    </div>
  );
}

Позначте необов’язкові поля символом ?, а значення за замовчуванням вкажіть або через розбирання, або за допомогою параметрів за замовчуванням.

children

Контент між тегами надходить у вигляді дочірніх елементів:

type ProductCardProps = {
  name: string;
  price: number;
  discount?: number; // may or may not be present
};

function ProductCard({ name, price, discount = 0 }: ProductCardProps) {
  const finalPrice = price - discount;
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{finalPrice.toLocaleString()} won</p>
    </div>
  );
}

Вказуйте тип дочірніх елементів як React.ReactNode, якщо тільки вам не потрібні більш суворі обмеження.

Перегляд у DevTools

// both are valid
<ProductCard name="Keyboard" price={89000} />              // discount is 0
<ProductCard name="Mouse" price={45000} discount={5000} />

Перевірте дерево компонентів, щоб з’ясувати, які саме пропси фактично надійшли — це дуже корисно під час виправлення помилок у обгорткових компонентах.

Пропси є лише для читання

type CardProps = {
  children: React.ReactNode;
};

function Card({ children }: CardProps) {
  return <div className="card">{children}</div>;
}// everything between the tags goes in as children
<Card>
  <h2>Mechanical Keyboard</h2>
  <p>89,000 won</p>
</Card>

Ніколи не змінюйте значення пропсів всередині дочірнього компонента. Перенесіть керування станом або передайте функцію-коригувальник, якщо дочірній компонент має запитати про зміну.

Підсумок

function ProductCard({ name, price }: ProductCardProps) {
  price = price * 2; // 🔴 absolutely forbidden — trying to change props directly
  return <p>{price} won</p>;
}

Пропси у поєднанні з TypeScript дозволяють створювати повторно використовувані інтерфейси з контрактами на етапі компіляції. Наступні кроки в цій серії зазвичай стосуються керування станом, ефектів та отримання даних — причому з типовими обмеженнями на кожному рівні.

Краще використовувати невеликі приклади, які читачі можуть скопіювати у сандбокс без monorepo.

Усі статті Надіслати бриф