Запісваць параметры React з атрыбутаў у дзецячыя элементы

Перадавайце даныя як атрыбуты HTML, задаўце значэння пропсаў у TypeScript, безпечна раскладвайце іх і заставляйце пропсы быть толькі для чытання.

1068 слоў

React-ныя пропы з TypeScript (стартавальнік 2026 года)

У серыі «Пацягванне React» для версіі React 19.2 + TypeScript, які ўзгодны з кампайляром, першая версія ProductCard мела недагодгу: поля продукту знаходзіліся ўнутрь компонента. Павторны выкарыстоўкі трэбуюць пропаў — дадзеныя, які перадаюцца з бацькоўскага компонента, падобныя да атрыбутаў HTML.

Перадача пропаў як атрыбутаў

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>;
}

Бацькі компонент володзі дадзенымі; дочынны компонент іх атрыбутуе.

Тыпаванне пропаў

Задайце інтэрфейс (або тип) для об’екта пропаў:

// 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

Закрэпіце тип пропаў у параметры функцыі, ўжо калі вы распаковваеце іх, каб застаўся типаваны статус.

Необов’язковыя пропы і значэння за замовчаннем

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 дазволяюць ствараць перыякты UI з умовамі на этапе кампайлявання. Наступныя пункты ў серыі зазвычай абарачваюцца станам, эфектамі та запошчуваннем дадзэнняў — пры чым у кожным слое таксама выкарыстоўваюцца типаваныя межы.

Лепшае выбір — маленькія прыклады, якія чытальнікі можаюць запісаць у сандбокс без наявнасці манорепа.

Лепшае выбаранне — маленькія прыклады, якія чытальнікі можаюць запісаць у сандбокс без наявнасці манорепа.

Усе артыкулы Даслаць брыф