In React sind Props (kurz für Eigenschaften) ein leistungsstarker Mechanismus zum Anpassen und Übergeben von Daten von einem Eltern- zu einem Kindkomponente. Diese Funktion ermöglicht es uns, wiederverwendbare und flexible Komponenten innerhalb der App zu erstellen.

Props übergeben

Stellen Sie sich vor, wir bauen einen Online-Shop.

In diesem Szenario haben wir eine Hauptkomponente namens App, und wir möchten Produktinformationen mithilfe einer Product-Komponente anzeigen. Wir können den Produktnamen und den Preis als Props von App an Product übergeben.

So wird es in der Praxis gemacht:

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

In der App-Komponente fügen wir die Product-Komponente ein und übergeben ihr die Props: name mit dem Wert "Green iguana" und price mit dem Wert 579.

Empfangen und Verwenden von Props

Schauen wir uns nun die Product-Komponente an, 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 definieren wir sie so, dass sie ein einziges Argument namens props akzeptiert. Innerhalb der Komponente können wir auf die Werte dieser Props zugreifen, indem wir die Punktnotation (.) gefolgt vom Eigenschaftsnamen verwenden (z.B. props.name und props.price).

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 leicht anpassen, indem wir verschiedene Props bereitstellen.

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

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

Vollständiger App-Code: