Komponenten-Props in NextJS

In NextJS können Daten, genau wie in React, von übergeordneten Komponenten an untergeordnete Komponenten über Props übergeben werden.

Sehen wir uns praktisch an, wie das gemacht wird. Nehmen wir an, unsere untergeordnete Komponente kann Props entgegennehmen:

export default function Child({text1, text2}) {
	return <p>
		child
	</p>;
}

Geben wir sie im Markup der Komponente aus:

export default function Child({text1, text2}) {
	return <p>
		child
		{text1}
		{text2}
	</p>;
}

Nehmen wir an, in der übergeordneten Komponente wird unsere untergeordnete Komponente importiert:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
		<Child />
	</>;
}

Übergeben wir nun Daten aus der übergeordneten Komponente an die untergeordnete Komponente:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
		<Child text1="aaa" text2="bbb" />
	</>;
}

Erstellen Sie eine untergeordnete Komponente Product zur Anzeige eines Produkts. Über Props sollen der Name und der Preis des Produkts übergeben werden.

Gegeben sei das folgende Array mit Produkten:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

Geben Sie die Produktdaten in einer Schleife aus, indem Sie die untergeordnete Komponente Product verwenden.