Props Komponen dalam React

Dalam pelajaran sebelumnya, kami memaparkan beberapa contoh produk:

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

Setakat ini, setiap panggilan tag produk memaparkan perkara yang sama pada skrin. Sekarang mari kita jadikan setiap produk unik.

Katakan, sebagai contoh, setiap produk mesti mempunyai nama dan harga. Mari kita buat supaya setiap panggilan tag produk memaparkan produk dengan namanya sendiri dan harganya, diformat dalam tata letak yang kita mahukan.

Untuk melakukan ini, kita perlu melalui beberapa langkah.

Sebagai permulaan, apabila memanggil tag produk, kita akan menulis dua atribut dalam tag ini: atribut name dengan nama produk dan atribut cost dengan harga, seperti ini:

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

Nama dan nilai atribut ini akan sampai dalam bentuk objek ke parameter pertama fungsi-pembina komponen kita Product:

function Product(props) {
	console.log(props); // objek dengan kunci name dan cost
	
	return <p>
		product
	</p>;
}

Nama parameter boleh apa sahaja, tetapi dalam React adalah lazim untuk menamakannya props. Sebenarnya ini bukan sekadar nama parameter, tetapi konsep penting dalam React.

Intipati konsep ini adalah seperti berikut: apabila memanggil tag komponen, kita boleh menulis atribut dengan data ke dalam tag ini. Data ini akan sampai ke props komponen. Kemudian komponen boleh menggunakan data ini, contohnya, untuk mencipta tata letak yang dikehendaki.

Mari kita lakukan ini:

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

Lebih mudah dan lebih lazim untuk tidak menggunakan objek props secara langsung, tetapi segera melakukan penyahstrukturan props terus dalam parameter fungsi:

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

Buat komponen Employee yang memaparkan data pekerja pada skrin. Biarkan data ini menjadi nama keluarga, nama, patronimik dan gaji. Format data ini dalam tata letak yang anda mahukan. Paparkan tiga pekerja dengan data yang berbeza dalam komponen App.