Requisiten und Rückrufe in einer Shell

In diesem Blogbeitrag werde ich Sie durch ein praktisches Szenario führen, in dem eine übergeordnete Komponente (ListBox) mit einer untergeordneten Komponente (AlertComponent) mit Requisiten und Rückrufen.

Ich habe eine
• ListBox-Komponente, die eine Liste von Elementen anzeigt. Wenn der Benutzer lange auf ein Element drückt, erscheint ein Warndialog, in dem er gefragt wird, ob der Benutzer das Element löschen möchte oder nicht.

1. ListBox (Parent) rendert die Elemente und übergibt notwendige Requisiten und Rückrufe an die AlertComponent (Child).

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;

Die
1. AlertComponent akzeptiert Requisiten wie Titel, Beschreibung und Rückrufe wie onAccept, onCancel und eine zustandsändernde Requisite showComponent.

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

Die übergeordnete Komponente muss die Sichtbarkeit des Dialogs verwalten, und die untergeordnete Komponente interagiert mit der übergeordneten Komponente, indem sie Ereignisse über Rückrufe ausgibt, um diese Sichtbarkeit umzuschalten.

AlertComponent verantwortlich ist

Ablehnen gedrückt wird, schaltet dieser Rückruf den aktuellen Status von showComponent um.

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

props und callbacks auf diese Weise ermöglicht einen klaren Datenfluss zwischen den übergeordneten und untergeordneten Komponenten in React.

Das obige ist der detaillierte Inhalt vonRequisiten und Rückrufe in einer Shell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!