Komposisi Component

22 minitPertengahanReact

Dalam pelajaran ini

Asingkan component ke dalam fail sendiri dan import-kannya
Guna prop children untuk membina component pembalut
Angkat state ke induk sepunya yang terdekat dan hantar data ke bawah / callback ke atas

Idea utama

Aplikasi besar ialah component kecil yang dicantumkan. Data mengalir ke bawah melalui props, dan anak berkomunikasi ke atas dengan memanggil function yang diberi oleh induknya. Apabila dua component perlukan data yang sama, alihkan data itu ke induk yang mereka kongsi.

Projek sebenar menyimpan setiap component dalam failnya sendiri. Export sebagai default, kemudian import di mana sahaja anda perlukan. Buka Panel.jsx dan ProductRow.jsx dalam editor — kedua-duanya di-import di bahagian atas App.jsx.

App.jsx

import Panel from "./Panel.jsx";
import ProductRow from "./ProductRow.jsx";

`children`: component yang membalut sesuatu

Apa sahaja yang anda letak di antara tag pembuka dan penutup sesuatu component akan diterima sebagai prop khas bernama children. Ini membolehkan anda membina bingkai, kad, modal dan susun atur yang tidak kisah apa isinya.

JSX

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

<Card title="Today's special">
  <p>Nasi kerabu with ayam percik</p>
  <button>Order</button>
</Card>

Mengangkat state ke atas (lifting state up)

Dalam kod permulaan, setiap ProductRow menyimpan qty-nya sendiri. Ia berfungsi — sehingga panel pesanan perlukan jumlah. Induk tidak boleh membaca state anaknya. Penyelesaiannya ialah mengangkat state ke atas:

Cari induk terdekat bagi semua yang perlukan data itu (di sini: App).
Alihkan state ke situ.
Hantar nilai ke bawah sebagai prop (qty) dan hantar callback ke bawah (onAdd, onRemove) yang dipanggil oleh anak untuk meminta perubahan.

State terperangkap dalam setiap baris

JSX

function ProductRow({ product }) {
  const [qty, setQty] = useState(0);
  return <button onClick={() => setQty(qty + 1)}>+</button>;
}

Induk memilikinya; baris melaporkan klik

JSX

function ProductRow({ product, qty, onAdd }) {
  return <button onClick={onAdd}>+</button>;
}

// in App:
<ProductRow qty={cart[p.id] ?? 0} onAdd={() => changeQty(p.id, 1)} />

Data ke bawah, event ke atas

Anak tidak pernah mengubah state induknya secara terus. Ia memanggil prop function — mengikut kebiasaan dinamakan onSesuatu — dan induk yang menentukan apa yang perlu dibuat. Satu pemilik, satu sumber kebenaran.

Sebaik sahaja state berada dalam App, perkara yang mustahil sebelum ini menjadi mudah: jumlah semasa, butang "Clear order" yang menetapkan semula semua baris serentak, menyimpan troli… semuanya dari satu tempat.

Kedua-dua panel memaparkan tajuk tetapi tiada isi. Dalam Panel.jsx, terima prop children dan paparkannya di bawah <h2>. Senarai buah dan jumlah pesanan patut muncul di dalam panel masing-masing.

Semakan

Dua panel dengan tajuk
Baris buah muncul di dalam panel
Jumlah muncul di dalam panel

Uji kefahaman

Dalam <Card title="Hi"><p>Body</p></Card>, bagaimana Card menerima <p> itu?

Sebagai props.childrenSebagai props.bodyTidak boleh — hanya string boleh diletak di dalam

Dua component adik-beradik perlukan state yang sama. Di mana ia patut disimpan?

Disalin ke dalam kedua-dua adik-beradikDalam induk sepunya terdekat mereka, dihantar ke bawah sebagai propsDalam pemboleh ubah global

Bagaimana anak patut meminta induknya mengubah state induk?

Panggil function yang dihantar oleh induk sebagai prop (cth. onAdd)Ubah objek props secara terusGuna document.querySelector untuk menyunting induk

Apa yang anda pelajari

Letak component dalam fail sendiri dengan export default dan import X from "./X.jsx".
children membolehkan component membalut apa sahaja yang diletakkan di dalamnya.
State yang dikongsi diletak dalam induk sepunya terdekat: nilai mengalir ke bawah sebagai props, perubahan mengalir ke atas melalui callback.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.