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:

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

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

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

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

import 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:

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

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

Tạo component con Product để hiển thị sản phẩm. Giả sử props được truyền là tên và giá sản phẩm.

Giả sử có mảng sau chứa các sản phẩm:

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

Hiển thị trong vòng lặp dữ liệu của các sản phẩm, sử dụng component con Product.