Props của Component trong NextJS

Trong NextJS cũng giống như trong React, dữ liệu từ component cha sang component con có thể được truyền qua props.

Hãy cùng xem cách thực hiện điều này trong thực tế. Giả sử component con của chúng ta có thể nhận các props:

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

Hãy hiển thị chúng trong phần tử của component:

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

Giả sử trong component cha import component con của chúng ta:

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

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

Hãy truyền dữ liệu từ component cha vào component con:

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