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.

Dies ist in React nützlich, wenn Sie möchten, dass eine untergeordnete Komponente mit der übergeordneten Komponente kommuniziert, um den Status beizubehalten oder Aktionen auszulösen.

Lassen Sie es uns anhand dieses Beispiels verstehen:

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.

Hier ist die Aufschlüsselung der Interaktionen:

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.

showComponent fungiert als Rückruf, da es den Zustand aufrechterhält, der für das Ein-/Ausblenden der

AlertComponent verantwortlich ist

Immer wenn

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}
      />

Die Verwendung von

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

Das Elternteil kann den Status kontrollieren und an das Kind weitergeben, während das Kind über Rückrufe kommunizieren kann, um das Elternteil über alle Änderungen oder Aktionen zu informieren, die der Benutzer durchgeführt hat.

Dies ist besonders nützlich für Szenarien wie das Anzeigen von Warnungen, Modalitäten oder Pop-ups als Reaktion auf Benutzerinteraktionen.

Weiterbauen!

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!