Props Komponen dalam NextJS

Dalam NextJS, sama seperti dalam React, data dari komponen induk kepada komponen anak boleh dihantar melalui props.

Mari kita lihat bagaimana ia dilakukan dalam praktik. Katakan komponen anak kita boleh menerima props:

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

Mari kita paparkan mereka dalam susun atur komponen:

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

Katakan dalam komponen induk komponen anak kita disambungkan:

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

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

Mari kita hantar data dari induk kepada komponen anak:

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