Komponentu props NextJS

NextJS, tāpat kā React, datus no vecāku komponentiem uz apakšējiem komponentiem var nodot caur props.

Apskatīsim, kā tas tiek darīts praksē. Pieņemsim, ka mūsu apakšējais komponents var saņemt props:

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

Attēlosim tos komponenta izskatā:

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

Pieņemsim, ka vecākā komponentā tiek pieslēgts mūsu apakšējais komponents:

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

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

Nododim apakšējā komponentā datus no vecākā komponenta:

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

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

Izveidojiet apakšējo komponentu Product preces attēlošanai. Ļaujiet, lai caur props tiek nodots preces nosaukums un cena.

Pieņemsim, ka ir dots šāds masīvs ar precēm:

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

Izvadiet cilpā preču datus, izmantojot apakšējo komponentu Product.