Bagaimana untuk Memanggil Kaedah Komponen Kanak-kanak daripada Induknya dalam React?

Memanggil Kaedah Komponen Kanak-kanak daripada Induknya dalam React

Dalam aplikasi React, selalunya perlu menggunakan kaedah yang ditakrifkan dalam komponen anak daripada mereka komponen induk. Walaupun terdapat pelbagai pendekatan untuk mencapai matlamat ini, artikel ini memfokuskan pada kaedah popular yang memanfaatkan rujukan.

Pendedahan Kaedah Imperatif melalui Rujukan

Rujukan membenarkan pembangun mengakses yang diberikan elemen komponen dan berinteraksi dengannya. Sebelum ini, rujukan hanya disokong oleh komponen berasaskan kelas, tetapi dengan pengenalan React Hooks, ia kini boleh digunakan dalam komponen berfungsi juga.

Menggunakan forwardRef dengan Komponen Fungsi

Untuk menjadikan komponen fungsi boleh diakses melalui rujukan, ia perlu dibungkus dengan forwardRef. Ini memberi kita akses kepada objek ref yang boleh ditetapkan melalui prop ref dan dihantar sebagai argumen kedua kepada komponen fungsi.

Mendedahkan Kaedah Menggunakan UseImperativeHandle

Untuk mendedahkan kaedah pada komponen kanak-kanak, kami menggunakan cangkuk useImperativeHandle. Cangkuk ini mengambil dua hujah: objek ref dan fungsi panggil balik. Fungsi panggil balik mengembalikan objek yang akan memanjangkan contoh komponen. Dengan menyediakan kaedah dalam objek yang dikembalikan ini, kami menjadikannya boleh diakses melalui rujukan.

Contoh dengan Coretan Kod

Mari kita tunjukkan cara memanggil kaedah anak daripada ibu bapa komponen menggunakan ref dan cangkuk useImperativeHandle:

Kanak-kanak Komponen

const Child = forwardRef((props, ref) => {

  useImperativeHandle(ref, () => ({

    getAlert() {
      alert("getAlert from Child");
    }

  }));

  return <h1>Hi</h1>;
});

Komponen Induk

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

Dalam contoh ini, komponen Kanak-kanak mendedahkan kaedah getAlert melalui ref, yang boleh dipanggil daripada komponen Induk dengan mengakses harta semasa bagi ref.

Nota: Adalah penting untuk diingat bahawa mendedahkan kaedah penting pada komponen kanak-kanak secara amnya tidak digalakkan untuk memihak kepada pendekatan yang lebih dipacu data dan deklaratif. Walau bagaimanapun, kaedah ini boleh berguna dalam senario tertentu di mana anda memerlukan akses terus kepada kefungsian komponen kanak-kanak.

Atas ialah kandungan terperinci Bagaimana untuk Memanggil Kaedah Komponen Kanak-kanak daripada Induknya dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!