พร็อพของคอมโพเนนต์ใน React

ในบทเรียนที่ผ่านมา เราได้แสดงอินสแตนซ์ของสินค้าออกมาหลายรายการ:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

ในตอนนี้ การเรียกใช้แท็กสินค้าแต่ละครั้งจะแสดงผลเหมือนกันทั้งหมด มาทำให้สินค้าแต่ละชิ้นมีลักษณะเฉพาะกันดีกว่า

ตัวอย่างเช่น ให้สินค้าแต่ละชิ้นมีชื่อและราคา เราจะทำให้การเรียกใช้แท็กสินค้าแต่ละครั้งแสดงสินค้าที่มีชื่อและราคาของตัวเอง โดยจัดแต่งเป็น markup ตามที่เราต้องการ

เพื่อทำสิ่งนี้ เราจำเป็นต้องทำตามขั้นตอนหลายประการ

ขั้นแรก เมื่อเรียกใช้แท็กสินค้า เราจะเขียนแอตทริบิวต์สองตัวลงในแท็กนี้: แอตทริบิวต์ name สำหรับชื่อสินค้า และแอตทริบิวต์ cost สำหรับราคา ดังนี้:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

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

function Product(props) {
	console.log(props); // อ็อบเจกต์ที่มีคีย์ name และ cost
	
	return <p>
		product
	</p>;
}

ชื่อพารามิเตอร์สามารถตั้งชื่ออะไรก็ได้ แต่ใน React นิยมเรียกชื่อว่า props อันที่จริงแล้วนี่ไม่ใช่แค่ชื่อพารามิเตอร์ แต่เป็นแนวคิดที่สำคัญของ React

สาระสำคัญของแนวคิดนี้มีดังนี้: เมื่อเรียกใช้แท็กคอมโพเนนต์ เราสามารถเขียนแอตทริบิวต์พร้อมข้อมูลลงในแท็กนี้ได้ ข้อมูลเหล่านี้จะเข้าไปอยู่ใน พร็อพ ของคอมโพเนนต์ จากนั้นคอมโพเนนต์สามารถใช้ข้อมูลนี้ได้ ตัวอย่างเช่น เพื่อสร้าง markup ตามต้องการ

มาทำกันเลย:

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

วิธีที่สะดวกกว่าและเป็นที่ยอมรับมากกว่าคือ ไม่ต้องใช้อ็อบเจกต์ props โดยตรง แต่ให้ทำการ destructuring พร็อพในพารามิเตอร์ของฟังก์ชันเลย:

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

สร้างคอมโพเนนต์ Employee ที่แสดงข้อมูลพนักงานบนหน้าจอ ให้ข้อมูลเหล่านี้ประกอบด้วย นามสกุล, ชื่อ, ชื่อกลาง และเงินเดือน จัดรูปแบบข้อมูลเหล่านี้เป็น markup ตามที่คุณต้องการ แสดงผลพนักงานสามคนที่มีข้อมูลแตกต่างกันในคอมโพเนนต์ App