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:

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

Kom ons hulle in die opmaak van die komponent toon:

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

Laat in die ouerkomponent ons kinderkomponent ingesluit word:

src/app/test/page.jsximport 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:

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

export default function Test() {
  return <>
    <h1>Test</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,
  },
];