Props Komponen dalam NextJS

Dalam NextJS, sama seperti dalam React, data dari komponen induk kepada komponen anak boleh dihantar melalui props.

Mari kita lihat bagaimana ia dilakukan dalam praktik. Katakan komponen anak kita boleh menerima props:

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

Mari kita paparkan mereka dalam susun atur komponen:

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

Katakan dalam komponen induk komponen anak kita disambungkan:

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

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

Mari kita hantar data dari induk kepada komponen anak:

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

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

Buatkan komponen anak Product untuk memaparkan produk. Biarkan melalui props dihantar nama dan harga produk.

Katakan diberikan array berikut dengan produk:

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

Paparkan dalam gelung data produk, menggunakan komponen anak Product.