Props dan Panggilan Balik dalam cangkerang

Dalam catatan blog ini, saya akan membimbing anda melalui senario praktikal di mana komponen induk (ListBox) berinteraksi dengan komponen kanak-kanak (AlertComponent) menggunakan prop dan panggil balik.

Ini berguna dalam React apabila anda mahu komponen anak berkomunikasi kembali kepada ibu bapa untuk mengekalkan keadaan atau mencetuskan tindakan.

Mari kita fahami dengan bantuan contoh ini:

• Saya mempunyai komponen ListBox yang memaparkan senarai item. Apabila pengguna melakukan tekan lama pada mana-mana item, dialog makluman muncul, bertanya sama ada pengguna mahu memadamkan item itu atau tidak.

Berikut ialah pecahan interaksi:

1. ListBox (Ibu bapa) memaparkan item dan menghantar prop dan panggilan balik yang diperlukan kepada AlertComponent (Kanak-kanak).

import React, { useState } from 'react';
import AlertComponent from './AlertComponent';

const ListBox = () => {
  const [showComponent, setShowComponent] = useState<boolean>(false);

  const alertAction = async () => {
    setShowComponent(!showComponent);
  };

  return (
    <div>
      <div onLongPress={alertAction}>
        <p>Item 1</p>
        {/* Other list items */}
      </div>

      {/* Passing props to the child component */}
      <AlertComponent
        title="Deleting item?"
        description="Click Accept to delete."
        onAccept={() => {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    </div>
  );
};

export default ListBox;

1. AlertComponent menerima prop seperti tajuk, penerangan dan panggilan balik seperti onAccept, onCancel dan prop yang mengubah keadaan showComponent.

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
return (<AlertDialog>
... rest of the code
</AlertDialog>)
}

1. Komponen induk perlu mengurus keterlihatan dialog dan komponen anak berinteraksi dengan induk dengan memancarkan peristiwa melalui panggilan balik untuk menogol keterlihatan ini.

showComponent berfungsi sebagai panggilan balik kerana ia mengekalkan keadaan yang bertanggungjawab untuk menunjukkan/menyembunyikan AlertComponent

Apabila Tolak ditekan, panggil balik ini akan menogol keadaan semasa showComponent.

<AlertComponent
        title="Deleting item?"
        description="Click Accept to delete."
        onAccept={() => {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

Menggunakan props dan panggilan balik dengan cara ini membolehkan aliran data yang jelas antara komponen induk dan anak dalam React.

Ibu bapa boleh mengawal keadaan dan menurunkannya kepada anak, manakala anak boleh berkomunikasi kembali melalui panggilan balik untuk memaklumkan ibu bapa tentang sebarang perubahan atau tindakan yang telah dilakukan oleh pengguna.

Ini amat berguna untuk senario seperti menunjukkan makluman, modal atau tetingkap timbul sebagai tindak balas kepada interaksi pengguna.

Teruskan membina!

Atas ialah kandungan terperinci Props dan Panggilan Balik dalam cangkerang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!