Пропсҳои компонентҳо дар NextJS

Дар NextJS ҳамчунон ки дар React, маълумотҳо аз компонентҳои волидайн ба компонентҳои фарзандӣ метавонанд аз тариқи пропсҳо интиқол дода шаванд.

Биёед бубинем, ки ин чӣ гуна амалӣ карда мешавад. Бигзор компоненти фарзандии мо метавонад пропсҳоро қабул кунад:

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

Биёед онҳоро дар версткаи компонент чоп кунем:

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

Бигзор дар компоненти волидайн компоненти фарзандии мо пайваст карда шавад:

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

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

Биёед ба компоненти фарзандӣ маълумотҳо аз компоненти волидайн интиқол диҳем:

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