Перевод параметров React из атрибутов в дочерние элементы

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

1068 слов

Параметры React с TypeScript (стартовый проект для 2026 года)

В серии статей «Restarting 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 позволяют создавать повторно используемый интерфейс с контрактами на этапе компиляции. Следующие разделы серии обычно посвящены состоянию, эффектам и загрузке данных — при этом на каждом уровне сохраняются типизированные ограничения.

Лучше использовать небольшие примеры, которые читатели могут вставить в сандбокс без необходимости использования монорепозитория.

Все статьи Прислать бриф