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

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

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

src/comp/child/child.jsxexport default function Child({text1, text2}) {
  return <p>
    ကလေး
  </p>;
}

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

src/comp/child/child.jsxexport default function Child({text1, text2}) {
  return <p>
    ကလေး
    {text1}
    {text2}
  </p>;
}

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

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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

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

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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

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