Пропсҳои компонентҳо дар NextJS

Дар NextJS ҳамчунон ки дар React, маълумотҳо аз компонентҳои волидайн ба компонентҳои фарзандӣ метавонанд аз тариқи пропсҳо интиқол дода шаванд.

Биёед бубинем, ки ин чӣ гуна амалӣ карда мешавад. Бигзор компоненти фарзандии мо метавонад пропсҳоро қабул кунад:

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

Биёед онҳоро дар версткаи компонент чоп кунем:

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

Бигзор дар компоненти волидайн компоненти фарзандии мо пайваст карда шавад:

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

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

Биёед ба компоненти фарзандӣ маълумотҳо аз компоненти волидайн интиқол диҳем:

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

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

Компоненти фарзандии Product созед барои чоп кардани маҳсулот. Бигзор пропсҳо ному нархи маҳсулотро интиқол диҳанд.

Бигзор массиви зерин бо маҳсулотҳо дода шудааст:

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

Дар давр маълумотҳои маҳсулотҳоро чоп кунед, бо истифода аз компоненти фарзандии Product.