การส่งสเตตไปยังคอมโพเนนต์ลูกใน React

สมมติว่าเรามีอาร์เรย์ของผลิตภัณฑ์:

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

สมมติว่าอาร์เรย์นี้อยู่ในคอมโพเนนต์ Products บันทึกผลิตภัณฑ์เหล่านี้ลงในสเตต ของคอมโพเนนต์:

function Products() {
	const [prods, setProds] = useState(initProds);
}

ตอนนี้เรามาไล่ผลิตภัณฑ์ด้วยลูป และแสดงผลในมาร์กอัปบางส่วน:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

ดังที่คุณเห็น เนื้อหาภายในลูป map ของเรา ค่อนข้างซับซ้อน โดยเฉพาะถ้ามาร์กอัปของ ผลิตภัณฑ์เติบโตขึ้นในอนาคต ความซับซ้อน เช่นนี้ทำให้การอ่าน ทำความเข้าใจ และ บำรุงรักษาโค้ดเป็นเรื่องยาก

ควรจะดีกว่าถ้าแยกโค้ดที่รับผิดชอบในการแสดงผล ผลิตภัณฑ์ออกเป็นคอมโพเนนต์แยกต่างหาก ตั้งชื่อว่า Product นี่คือโค้ดของคอมโพเนนต์ของเรา:

function Product({ name, cost }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</div>;
}

ตอนนี้ภายในคอมโพเนนต์ Products ในลูป map เรามาใช้คอมโพเนนต์ลูก Product:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

ดังที่คุณเห็น ตอนนี้โค้ดของลูปถูกทำให้ง่ายขึ้น และเข้าใจได้ง่ายกว่า นอกจาก นี้ ตอนนี้การแสดงผลผลิตภัณฑ์เป็นหน้าที่ของ คอมโพเนนต์แยกต่างหาก ซึ่งเราสามารถสร้าง และแก้ไขมาร์กอัปของผลิตภัณฑ์ได้ในภายหลัง

ในทางเทคนิค เราได้ผลลัพธ์ว่าคอมโพเนนต์แม่ มีสเตตที่มีข้อมูล ส่วนคอมโพเนนต์ลูก ได้รับข้อมูลเหล่านี้ในรูปของพร็อพส์ และแสดงผลในลักษณะที่เราต้องการ

ในสเตตของคอมโพเนนต์ Users มีอาร์เรย์ต่อไปนี้:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

ไล่อาร์เรย์นี้ด้วยลูปและแสดงผล ผู้ใช้ทั้งหมดบนหน้าจอ สร้างคอมโพเนนต์แยกต่างหาก ชื่อ User สำหรับการแสดงผลผู้ใช้