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

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

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

export default function Child({text1, text2}) {
	return <p>
		child
	</p>;
}

Ας τις εμφανίσουμε στη σήμανση του στοιχείου:

export default function Child({text1, text2}) {
	return <p>
		child
		{text1}
		{text2}
	</p>;
}

Ας υποθέσουμε ότι το γονικό στοιχείο συμπεριλαμβάνει το θυγατρικό μας στοιχείο:

import Child from '@/comp/child/child.jsx';

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

Ας μεταβιβάσουμε στο θυγατρικό στοιχείο δεδομένα από το γονικό:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
		<Child text1="aaa" text2="bbb" />
	</>;
}

Δημιουργήστε ένα θυγατρικό στοιχείο Product για την εμφάνιση ενός προϊόντος. Ας μεταβιβάζονται ως ιδιότητες το όνομα και η τιμή του προϊόντος.

Ας υποθέσουμε ότι δίνεται ο ακόλουθος πίνακας με προϊόντα:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

Εμφανίστε σε βρόχο τα δεδομένα των προϊόντων, χρησιμοποιώντας το θυγατρικό στοιχείο Product.