NextJS တွင် Component များ၏ Props များ

React တွင်ကဲ့သို့ပင် NextJS တွင်လည်း မိဘ component များမှ ကလေး component များသို့ ဒေတာများကို props များမှတစ်ဆင့် ပို့ဆောင်နိုင်ပါသည်။

လက်တွေ့တွင် ၎င်းကို မည်သို့လုပ်ဆောင်သည်ကို ကြည့်ရှုကြပါစို့။ ကျွန်ုပ်တို့၏ ကလေး component သည် props များကို လက်ခံနိုင်သည်ဟု ယူဆပါစို့။

export default function Child({text1, text2}) {
	return <p>
		ကလေး
	</p>;
}

ယင်းတို့ကို component ၏ markup တွင် ထုတ်ပြကြပါစို့။

export default function Child({text1, text2}) {
	return <p>
		ကလေး
		{text1}
		{text2}
	</p>;
}

မိဘ component တွင် ကျွန်ုပ်တို့၏ ကလေး component ကို တင်သွင်းထားသည်ဟု ယူဆပါစို့။

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

export default function Test() {
	return <>
		<h1>စမ်းသပ်မှု</h1>
		<Child />
	</>;
}

မိဘ component မှ ကလေး component သို့ ဒေတာများပို့ဆောင်ကြပါစို့။

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

export default function Test() {
	return <>
		<h1>စမ်းသပ်မှု</h1>
		<Child text1="aaa" text2="bbb" />
	</>;
}

�ုတ်ကုန်တစ်ခုကို ပြသရန် ကလေး component တစ်ခု Product လုပ်ဆောင်ပါ။ props များအနေဖြင့် ထုတ်ကုန်၏ အမည်နှင့် ဈေးနှုန်းကို ပို့ဆောင်ပါစေ။

အောက်ပါ ထုတ်ကုန်များ ပါဝင်သည့် array တစ်ခု ပေးထားသည်ဟု ယူဆပါစို့။

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

ကလေး component Product ကို အသုံးပြုကာ ထုတ်ကုန်များ၏ ဒေတာများကို loop ဖြင့် ထုတ်ပြပါ။