Props: Menghantar Data kepada Component

15 minitPertengahanReact

Dalam pelajaran ini

Hantar data ke dalam component dengan props dan baca di dalamnya
Destructure props dan beri nilai lalai
Guna prop khas children untuk membina component pembalut
Terangkan kenapa component tidak boleh mengubah props sendiri

Idea utama

Props ialah input sesebuah component. Induk menghantarnya seperti atribut HTML, dan component menerimanya sebagai satu objek — sama seperti argumen kepada function.

Component yang sentiasa memaparkan "Kopi O" tidak begitu boleh diguna semula. Function menyelesaikannya dengan parameter; component menyelesaikannya dengan props (singkatan properties).

Induk menghantar props

JSX

<ProductCard name="Teh tarik" price={2.2} />

Component menerima satu objek

JSX

function ProductCard(props) {
  // props = { name: "Teh tarik", price: 2.2 }
  return <h3>{props.name}</h3>;
}

String boleh guna tanda petik. Selain itu — nombor, boolean, array, objek, function — mesti dalam kurungan kerinting: price={2.2}, inStock={true}.

Destructuring: gaya harian

Menulis props. di mana-mana jadi bising, jadi kebanyakan kod React destructure objek props terus dalam senarai parameter. Anda juga boleh beri prop nilai lalai yang digunakan bila induk tidak menghantarnya.

JSX

function ProductCard({ name, price, size = "Regular" }) {
  return (
    <article className="card">
      <h3>{name}</h3>
      <p className="price">RM{price.toFixed(2)}</p>
      <p className="size">{size}</p>
    </article>
  );
}

<ProductCard name="Kopi O" price={2} />                  // size → "Regular"
<ProductCard name="Milo panas" price={3} size="Large" />  // size → "Large"

children: apa sahaja yang anda letak di antara tag

Bila anda tulis kandungan di antara tag pembuka dan penutup sesuatu component, React menghantarnya dalam prop khas bernama children. Beginilah anda membina pembalut seperti kad, panel dan susun atur yang tidak kisah apa isinya.

JSX

function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

<Panel title="Cold drinks">
  <p>Everything here comes with ice.</p>
</Panel>

Props hanya untuk dibaca

Data mengalir sehala: dari induk ke anak. Component hanya patut membaca props, jangan sesekali mengubahnya. Dalam mod development, React malah membekukan objek props, jadi props.name = "…" akan mencetuskan ralat. Bila sesuatu perlu berubah dari masa ke masa, itulah state — pelajaran seterusnya.

Bayangkan props seperti slip pesanan di kopitiam: pelanggan (induk) menulisnya, pembancuh air (component) membacanya dan membuat minuman. Pembancuh air tidak menulis semula slip itu.

Ketiga-tiga kad tertulis Kopi O, RM2.00. Beri ProductCard dua props, name dan price, dan guna dalam JSX. Kemudian hantar minuman yang berbeza kepada setiap kad dalam App, contohnya <ProductCard name="Teh tarik" price={2.2} />.

Semakan

Setiap kad memaparkan prop name sendiri
Setiap kad memaparkan prop price sendiri

Uji kefahaman

<Badge label="Sale" count={3} /> — apakah yang Badge terima sebagai parameter pertama?

Dua argumen berasingan: "Sale" dan 3Satu objek: { label: "Sale", count: 3 }String: label="Sale" count={3}

Di dalam component, anda mahu paparkan nama dalam huruf besar. Yang manakah betul?

props.name = props.name.toUpperCase();const shout = name.toUpperCase(); dan render {shout}Minta pelayar menukarnya kepada huruf besar

Dalam <Card><p>Hi</p></Card>, bagaimana Card mendapat <p> itu?

Melalui prop childrenTidak boleh — component tak boleh ada kandungan di antara tagDengan document.querySelector("p")

Apa yang anda pelajari

Props ialah input component, dihantar seperti atribut dan diterima sebagai satu objek.
Destructure dalam senarai parameter dan tetapkan nilai lalai: ({ name, size = "Regular" }).
children memegang apa sahaja di antara tag component — sesuai untuk pembalut.
Data mengalir sehala, dari induk ke anak. Jangan ubah props.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.