Component Props in NextJS

In NextJS, net als in React, kunnen gegevens van oudercomponenten naar kindcomponenten worden doorgegeven via props.

Laten we in de praktijk bekijken hoe dit wordt gedaan. Stel dat onze kindcomponent props kan accepteren:

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

Laten we ze weergeven in de opmaak van de component:

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

Stel dat in de oudercomponent onze kindcomponent wordt geïmporteerd:

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

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

Laten we gegevens van de ouder doorgeven aan de kindcomponent:

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

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

Maak een kindcomponent Product voor het weergeven van een product. Laat de productnaam en prijs via props worden doorgegeven.

Stel dat de volgende array met producten gegeven is:

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

Geef in een lus de productgegevens weer, met behulp van de kindcomponent Product.