Komponentide propsid NextJS-is

NextJS-s saab nagu React-iski andmeid vanemkomponentidest lastekomponentidesse edastada läbi propside.

Vaatame praktikas, kuidas seda tehakse. Oletame, et meie lapsekomponent saab võtta vastu propse:

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

Kuvame need komponendi väljundis:

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

Oletame, et vanemkomponendis imporditakse meie lapsekomponent:

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

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

Edastame lapsekomponendi andmed vanemkomponendist:

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

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

Looge lapsekomponent Product toote kuvamiseks. Olgu propsideks toote nimi ja hind.

Oletame, et on antud järgmine massiiv toodetega:

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

Kuvage tsüklis toodete andmed, kasutades lapsekomponenti Product.