Accessoires et rappels dans un shell

Dans cet article de blog, je vais vous présenter un scénario pratique dans lequel un composant parent (ListBox) interagit avec un composant enfant (AlertComponent) en utilisant des accessoires et des rappels.

Ceci est utile dans React lorsque vous souhaitez qu'un composant enfant communique en retour avec le parent pour maintenir son état ou déclencher des actions.

Comprenons à l'aide de cet exemple :

• J'ai un composant ListBox qui affiche une liste d'éléments. Lorsque l'utilisateur appuie longuement sur un élément, une boîte de dialogue d'alerte apparaît, lui demandant si l'utilisateur souhaite supprimer l'élément ou non.

Voici la répartition des interactions :

1. ListBox (Parent) restitue les éléments et transmet les accessoires et rappels nécessaires au AlertComponent (Enfant).

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. Le AlertComponent accepte des accessoires tels que le titre, la description et les rappels tels que onAccept, onCancel et un accessoire de changement d'état showComponent.

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

1. Le composant parent doit gérer la visibilité de la boîte de dialogue, et le composant enfant interagit avec le parent en émettant des événements via des rappels pour basculer cette visibilité.

showComponent fonctionne comme un rappel car il maintient l'état qui est chargé d'afficher/masquer le AlertComponent

Chaque fois que Rejeter est enfoncé, ce rappel fera basculer l'état actuel de showComponent.

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

Utiliser les props et les callbacks de cette manière permet un flux clair de données entre les composants parent et enfant dans React.

Le parent peut contrôler l'état et le transmettre à l'enfant, tandis que l'enfant peut communiquer via des rappels pour informer le parent de tout changement ou action effectué par l'utilisateur.

Ceci est particulièrement utile pour des scénarios tels que l'affichage d'alertes, de modaux ou de fenêtres contextuelles en réponse à l'interaction de l'utilisateur.

Continuez à construire !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!