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 l'é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(false);

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

  return (
    

      

        
Item 1
        {/* Other list items */}
      

      {/* Passing props to the child component */}
       {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    
  );
};

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 (
... rest of the code
)
}

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 chargé d'afficher/masquer le AlertComponent

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

 {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

L'utilisation de props et 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 !