Übergabe von States an Kindkomponenten in React

Nehmen wir an, wir haben ein Array mit Produkten:

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

Nehmen wir an, dieses Array befindet sich in der Komponente Products. Speichern wir diese Produkte im State der Komponente:

function Products() {
	const [prods, setProds] = useState(initProds);
}

Lassen Sie uns nun die Produkte in einer Schleife durchlaufen und sie in einem beliebigen Markup ausgeben:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

Wie Sie sehen, ist der Inhalt unserer map-Schleife komplex genug, besonders wenn das Markup eines Produkts später wächst. Eine solche Komplexität erschwert das Lesen, Verstehen und die Wartung des Codes.

Es wäre besser, den Code, der für die Anzeige des Produkts verantwortlich ist, in eine separate Komponente auszulagern. Nennen wir sie Product. Hier ist der Code unserer Komponente:

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

Verwenden wir nun innerhalb der Komponente Products in der map-Schleife die Kindkomponenten Product:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Wie Sie sehen, wurde der Code der Schleife vereinfacht und ist jetzt verständlicher. Außerdem ist jetzt eine separate Komponente für die Anzeige des Produkts verantwortlich, in der wir das Markup der Produkte erstellen und später bearbeiten können.

Technisch gesehen haben wir es so erreicht, dass die übergeordnete Komponente einen State mit Daten hat, während die untergeordneten Komponenten diese Daten in Form von Props erhalten und sie auf die von uns gewünschte Weise anzeigen.

Im State der Komponente Users ist das folgende Array gegeben:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

Durchlaufen Sie dieses Array in einer Schleife und geben Sie alle Benutzer auf dem Bildschirm aus. Erstellen Sie für die Anzeige eines Benutzers eine separate Komponente User.