Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Memanggil Kaedah Anak daripada Komponen Induk dalam React?

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

Linda Hamilton
Linda Hamiltonasal
2024-12-25 13:16:101008semak imbas

How Can I Call Child Methods from Parent Components in 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();
  1. Tetapkan ref kepada komponen anak:
<Child ref={childRef} />
  1. 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();
  1. Balut komponen anak dalam forwardRef untuk mengakses ref:
const Child = forwardRef((props, ref) => {
  // ...
});
  1. Gunakan cangkuk useImperativeHandle untuk mendedahkan kaedah kanak-kanak kepada ibu bapa:
useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));
  1. 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn