Komponenten-Props in React

In der vorherigen Lektion haben wir mehrere Produktinstanzen ausgegeben:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Bisher gibt jeder Aufruf des Produkt-Tags dasselbe auf dem Bildschirm aus. Lassen Sie uns nun jedes Produkt einzigartig gestalten.

Nehmen wir an, jedes Produkt soll beispielsweise einen Namen und einen Preis haben. Sorgen wir dafür, dass jeder Aufruf des Produkt-Tags ein Produkt mit seinem eigenen Namen und Preis ausgibt, formatiert in das von uns gewünschte Markup.

Dazu müssen wir mehrere Schritte durchführen.

Zunächst werden wir beim Aufruf des Produkt-Tags in diesen Tag zwei Attribute schreiben: das Attribut name mit dem Produktnamen und das Attribut cost mit dem Preis, wie folgt:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Die Namen und Werte dieser Attribute werden als Objekt in den ersten Parameter unserer Komponenten-Funktion Product gelangen:

function Product(props) {
	console.log(props); // Objekt mit den Schlüsseln name und cost
	
	return <p>
		product
	</p>;
}

Der Parametername kann beliebig sein, aber in React ist es üblich, ihn props zu nennen. Tatsächlich ist dies nicht nur ein Parametername, sondern ein wichtiges Konzept in React.

Die Essenz dieses Konzepts ist folgende: Beim Aufruf eines Komponenten-Tags können in diesen Tag Attribute mit Daten geschrieben werden. Diese Daten gelangen in die Props der Komponente. Anschließend kann die Komponente diese Daten verwenden, beispielsweise um das gewünschte Markup zu erstellen.

Lassen Sie uns das umsetzen:

function Product(props) {
	return <p>
		name: <span>{props.name}</span>,
		cost: <span>{props.cost}</span>
	</p>;
}

Praktischer und üblicher ist es, nicht das Objekt props zu verwenden, sondern direkt eine Destrukturierung der Props in den Parametern der Funktion vorzunehmen:

function Product({ name, cost }) {
	return <p>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</p>;
}

Erstellen Sie eine Komponente Employee, die die Daten eines Mitarbeiters auf dem Bildschirm anzeigt. Lassen Sie diese Daten Nachname, Vorname, Vatersname und Gehalt sein. Formatieren Sie diese Daten in das von Ihnen gewünschte Markup. Geben Sie in der Komponente App drei Mitarbeiter mit unterschiedlichen Daten aus.