NextJS da komponentlarning prop'lari

NextJS da, xuddi React dagi kabi, ma'lumotlarni ota komponentlardan farzand komponentlarga prop'lar orqali uzatish mumkin.

Keling, buni amalda qanday bajarilishini ko'raylik. Farzand komponentimiz prop'larni qabul qilishi mumkin deb faraz qilaylik:

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

Keling ularni komponentning verstkasida chiqaramiz:

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

Faraz qilaylik, ota komponentda bizning farzand komponentimiz ulangan:

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

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

Keling, farzand komponentga ota komponentdan ma'lumotlarni uzataylik:

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