Komponent Popsies in NextJS

In NextJS, net soos in React, kan data van ouerkomponente na kinderkomponente oorgedra word deur middel van popsies.

Kom ons kyk hoe dit in die praktyk gedoen word. Laat ons kinderkomponent popsies kan aanvaar:

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

Kom ons hulle in die opmaak van die komponent toon:

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

Laat in die ouerkomponent ons kinderkomponent ingesluit word:

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

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

Kom ons dra data van die ouer na die kinderkomponent oor:

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

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

Maak 'n kinderkomponent Product om 'n produk te toon. Laat die produknaam en prys as popsies oorgedra word.

Laat die volgende skikking met produkte gegee word:

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

Wys die produkdata in 'n lus, deur die kinderkomponent Product te gebruik.