Props Komponen dalam React

Dalam pelajaran sebelumnya, kami memaparkan beberapa contoh produk:

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

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

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

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

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