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

Memanggil Kaedah Anak daripada Komponen Induk

Dalam React, komunikasi antara komponen biasanya dicapai melalui prop (sifat) dan acara, tetapi ia adalah mungkin untuk mengakses dan menggunakan kaedah komponen anak daripada komponen induk menggunakan rujukan.

Kaedah Invokasi Menggunakan Ruj

1. Balut Komponen Anak dalam forwardRef: Untuk mengakses contoh komponen anak, bungkusnya dalam forwardRef . Ini membenarkan React untuk menghantar ref sebagai argumen kedua kepada komponen.
2. Initialize Child Instance Ref: Dalam komponen induk, cipta ref menggunakan useRef(). Ini akan menyimpan rujukan kepada contoh komponen kanak-kanak.
3. Tetapkan Ruj kepada Anak: Hantarkan rujukan kepada komponen kanak-kanak menggunakan prop rujukan. Ini memberikan contoh komponen anak kepada rujukan komponen induk.
4. Dedahkan Kaedah Anak: Dalam komponen anak, gunakan useImperativeHandle untuk mengembalikan objek yang mengandungi kaedah yang anda ingin dedahkan kepada induk.

Contoh dengan Cangkuk

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("getAlert from Child");
    }
  }));

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

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

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

ReactDOM.render(<Parent />, document.getElementById('root'));

Dalam contoh ini, getAlert() ialah kaedah yang didedahkan oleh komponen Child yang boleh digunakan daripada komponen Induk dengan mengakses harta semasa childRef. Ambil perhatian bahawa menggunakan kaedah kanak-kanak secara langsung daripada ibu bapa adalah tidak disyorkan dan harus dielakkan memihak kepada corak komunikasi komponen yang betul.

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