In React sind Props (Kurzform für Properties) ein leistungsfähiger Mechanismus, um Daten von einer Eltern- zu einer Kindkomponente zu übergeben und anzupassen. Diese Funktion ermöglicht die Erstellung wiederverwendbarer und flexibler Komponenten innerhalb der Anwendung.

Props übergeben

Angenommen, wir entwickeln einen Online-Shop.

In diesem Szenario gibt es eine Hauptkomponente namens App, und wir möchten Produktinformationen mit einer Product-Komponente anzeigen. Der Produktname und der Preis können als Props von App an Product übergeben werden.

So wird es in der Praxis umgesetzt:

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

Im App-Komponentenbeispiel 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 über die Punktnotation (.) mit dem jeweiligen Eigenschaftsnamen (z. B. props.name und props.price) abgerufen werden.

Praktische Anwendung

Mit diesem Ansatz wurde eine Product-Komponente erstellt, die mehrfach mit unterschiedlichen Produktinformationen wiederverwendet werden kann. Der Textinhalt jeder Product-Komponente lässt sich einfach durch verschiedene Props anpassen.

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

So besteht die Möglichkeit, verschiedene Produktdetails mit derselben Product-Komponente darzustellen.

Vollständiger App-Code: