Component Props in NextJS

In NextJS, net als in React, kunnen gegevens van oudercomponenten naar kindcomponenten worden doorgegeven via props.

Laten we in de praktijk bekijken hoe dit wordt gedaan. Stel dat onze kindcomponent props kan accepteren:

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

Laten we ze weergeven in de opmaak van de component:

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

Stel dat in de oudercomponent onze kindcomponent wordt geïmporteerd:

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

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

Laten we gegevens van de ouder doorgeven aan de kindcomponent:

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,
  },
];