Ιδιότητες (Props) Στοιχείων στο NextJS

Στο NextJS, όπως και στο React, τα δεδομένα από τα γονικά στοιχεία στα θυγατρικά μπορούν να μεταβιβαστούν μέσω ιδιοτήτων (props).

Ας δούμε πώς γίνεται αυτό στην πράξη. Ας υποθέσουμε ότι το θυγατρικό μας στοιχείο μπορεί να δεχτεί ιδιότητες:

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