Props của Component trong React

Ở bài học trước, chúng ta đã hiển thị nhiều thể hiện sản phẩm:

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

Hiện tại, mỗi lần gọi thẻ sản phẩm đều hiển thị ra màn hình cùng một nội dung. Bây giờ hãy làm cho mỗi sản phẩm trở nên độc đáo.

Giả sử, mỗi sản phẩm cần có tên và giá. Hãy làm sao để mỗi lần gọi thẻ sản phẩm hiển thị sản phẩm với tên và giá của riêng nó, được định dạng theo HTML chúng ta mong muốn.

Để làm điều này, chúng ta cần thực hiện một vài bước.

Đầu tiên, khi gọi thẻ sản phẩm, chúng ta sẽ viết hai thuộc tính vào thẻ này: thuộc tính name với tên sản phẩm và thuộc tính cost với giá, như thế này:

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

Tên và giá trị của các thuộc tính này sẽ được truyền vào dưới dạng một đối tượng ở tham số đầu tiên của hàm tạo component Product của chúng ta:

function Product(props) {
	console.log(props); // đối tượng với các khóa name và cost
	
	return <p>
		product
	</p>;
}

Tên tham số có thể là bất kỳ tên nào, nhưng trong React, người ta thường đặt tên nó là props. Thực chất đây không chỉ đơn giản là tên tham số, mà là một khái niệm quan trọng trong React.

Bản chất của khái niệm này như sau: khi gọi thẻ component, có thể ghi các thuộc tính chứa dữ liệu vào thẻ này. Dữ liệu này sẽ được truyền vào props của component. Sau đó, component có thể sử dụng dữ liệu này, ví dụ, để tạo ra HTML mong muốn.

Hãy thực hiện điều này:

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

Thuận tiện hơn và được chấp nhận rộng rãi hơn là không sử dụng trực tiếp đối tượng props, mà ngay lập tức thực hiện destructuring props ngay trong tham số của hàm:

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

Hãy tạo một component Employee, hiển thị dữ liệu của nhân viên ra màn hình. Giả sử dữ liệu này là họ, tên, tên đệm và lương. Hãy định dạng dữ liệu này theo HTML bạn mong muốn. Hiển thị trong component App ba nhân viên với dữ liệu khác nhau.