Reakt-Props aus Attributen in Kinderkomponenten umwandeln

Übertragen Sie Daten wie HTML-Attribute, geben Sie Typenangaben in TypeScript an, destrukturiere sicher und halten Sie die Props als nur zum Lesen bereit.

1068 Wörter

React-Props mit TypeScript (2026 Starter)

In der Reihe „Restarting React“, die sich an React 19.2 sowie compilerfreundliches TypeScript richtet, hatte das ursprüngliche ProductCard ein Manko: Die Produktfelder befanden sich innerhalb der Komponente. Wiederverwendung erfordert Props – Daten, die wie HTML-Attribute von Elternkomponenten übergeben werden.

Props wie Attribute übergeben

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

Die Elternkomponente besitzt die Daten; die Kinderkomponente rendernt sie.

Typisierung von Props

Definieren Sie eine Schnittstelle (oder ein Typ) für das Props-Objekt:

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

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

Der Compiler erkennt fehlende Felder und falsche Typen bereits vor der Laufzeit.

Dekonstruktion für bessere Übersicht

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

Bewahren Sie den Typ der Props im Funktionsparameter auf, damit die Dekonstruktion typisiert bleibt.

Optionale Props und Standardwerte

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

Markieren Sie optionale Felder mit ? und geben Sie Standardwerte entweder durch Dekonstruktion oder über Standardparameter an.

children

Der Inhalt zwischen den Tags wird als Kinderelemente übergeben:

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

Definieren Sie die Kinderelemente als React.ReactNode, es sei denn, Sie benötigen eine engere Spezifikation.

Ausführliche Ansicht in DevTools

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

Überprüfen Sie den Komponentenbaum, um zu erkennen, welche Props tatsächlich übergeben wurden – das ist bei der Fehlersuche in Wrapper-Komponenten von unschätzbarem Wert.

Props sind nur zum Lesen zugänglich

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>

Verändern Sie niemals Props innerhalb der Kinderkomponente. Heben Sie den Zustand hoch oder übergeben Sie einen Setter-Callback, wenn die Kinderkomponente eine Änderung anfordern muss.

Zusammenfassung

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

Props in Kombination mit TypeScript ermöglichen wiederverwendbare UIs mit Verträgen zur Laufzeit-Kompilierung. Die nächsten Schritte in der Serie behandeln in der Regel Zustand, Effekte und Datenabruf – ebenfalls mit typisierten Grenzen in jeder Schicht.

Es sollten kleine Beispiele bevorzugt werden, die Leser in eine Sandbox kopieren können, ohne ein Monorepo zu benötigen.

Es sind kleinere Beispiele vorzuziehen, die Leser in eine Sandbox kopieren können, ohne ein Monorepo zu benötigen.

Alle Artikel Brief senden