Bagaimanakah Saya Boleh Memanggil Kaedah Anak daripada Komponen Induk dalam React?

Memanggil Kaedah Anak daripada Komponen Induk

Dalam React, tidak semestinya perlu memanggil kaedah anak secara terus. Walau bagaimanapun, terdapat keadaan yang mungkin diperlukan, seperti apabila komponen kanak-kanak mendedahkan kaedah penting. Artikel ini menunjukkan cara untuk mencapai ini menggunakan rujukan, untuk komponen berasaskan kelas dan berfungsi.

Komponen Berasaskan Kelas

Untuk memanggil kaedah anak daripada komponen berasaskan kelas induk menggunakan rujukan, ikut langkah berikut:

1. Buat rujukan dalam komponen induk menggunakan createRef():

const childRef = React.createRef();

2. Tetapkan ref kepada komponen anak:

<Child ref={childRef} />

3. Gunakan childRef untuk mengakses kaedah kanak-kanak :

childRef.current.getAlert();

Komponen Berfungsi dengan Cangkuk

Dengan pengenalan React Hooks, anda kini boleh menggunakan rujukan dalam komponen berfungsi juga. Begini cara untuk memanggil kaedah anak daripada komponen berfungsi induk menggunakan rujukan:

1. Gunakan cangkuk useRef() untuk mencipta ref:

const childRef = useRef();

2. Balut komponen anak dalam forwardRef untuk mengakses ref:

const Child = forwardRef((props, ref) => {
  // ...
});

3. Gunakan cangkuk useImperativeHandle untuk mendedahkan kaedah kanak-kanak kepada ibu bapa:

useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));

4. Gunakan childRef untuk mengakses kaedah kanak-kanak:

childRef.current.getAlert();

Nota: Adalah penting untuk ambil perhatian bahawa menggunakan rujukan untuk memanggil kaedah kanak-kanak secara amnya tidak digalakkan dalam Bertindak balas. Lebih baik berlatih untuk menurunkan data dan acara melalui prop dan keadaan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memanggil Kaedah Anak daripada Komponen Induk dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!