In React sind Props (Kurzform für Properties) ein leistungsfähiger Mechanismus, um Daten von einer übergeordneten an eine untergeordnete Komponente weiterzugeben und anzupassen. Diese Funktion ermöglicht die Erstellung wiederverwendbarer und flexibler Komponenten innerhalb der Anwendung.

Props übergeben

Stellen wir uns vor, wir entwickeln einen Online-Shop.

In diesem Szenario gibt es eine Hauptkomponente namens App, und Produktinformationen sollen mithilfe einer Product-Komponente angezeigt werden. Der Produktname und der Preis können als Props von App an Product übergeben werden.

So wird dies in der Praxis umgesetzt:

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

In der App-Komponente wird die Product-Komponente eingebunden und erhält die Props: name mit dem Wert "Green iguana" und price mit dem Wert 579.

Props empfangen und verwenden

Nun betrachten wir die Product-Komponente, die diese Props empfängt:

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

In der Product-Komponente wird ein einzelnes Argument namens props akzeptiert. Innerhalb der Komponente können die Werte dieser Props mit der Punktnotation (.) und dem jeweiligen Eigenschaftsnamen (z. B. props.name und props.price) abgerufen werden.

Praktische Anwendung

Mit diesem Ansatz haben wir eine Product-Komponente erstellt, die mit unterschiedlichen Produktinformationen mehrfach wiederverwendet werden kann. Wir können den Textinhalt jeder Product-Komponente einfach anpassen, indem wir verschiedene Props übergeben.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

Nun haben wir die Flexibilität, verschiedene Produktdetails mit derselben Product-Komponente anzuzeigen.

Vollständiger App-Code: