Comment appeler une méthode de composant enfant depuis son parent dans React ?

Appel d'une méthode de composant enfant depuis son parent dans React

Dans les applications React, il est souvent nécessaire d'invoquer des méthodes définies dans les composants enfants depuis leur composants parents. Bien qu'il existe différentes approches pour y parvenir, cet article se concentre sur une méthode populaire qui exploite les références.

Exposition de méthode impérative via les références

Les références permettent aux développeurs d'accéder au rendu éléments d’un composant et interagir avec eux. Auparavant, les références n'étaient prises en charge que par les composants basés sur les classes, mais avec l'introduction de React Hooks, elles peuvent désormais également être utilisées dans les composants fonctionnels.

Utilisation de forwardRef avec un composant de fonction

Pour rendre un composant fonction accessible via les références, il doit être enveloppé dans forwardRef. Cela nous donne accès à un objet ref qui peut être attribué via la prop ref et passé comme deuxième argument au composant fonction.

Exposer la méthode à l'aide de UseImperativeHandle

Pour exposer une méthode sur un composant enfant, nous utilisons le hook useImperativeHandle. Ce hook prend deux arguments : un objet ref et une fonction de rappel. La fonction de rappel renvoie un objet qui étendra l'instance du composant. En fournissant la méthode dans cet objet renvoyé, nous la rendons accessible via la référence.

Exemple avec des extraits de code

Montrons comment appeler une méthode enfant à partir d'un parent composant utilisant des références et le hook useImperativeHandle :

Child Composant

const Child = forwardRef((props, ref) => {

  useImperativeHandle(ref, () => ({

    getAlert() {
      alert("getAlert from Child");
    }

  }));

  return <h1>Hi</h1>;
});

Composant Parent

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

Dans cet exemple, le composant Child expose la méthode getAlert via la référence, qui peut être appelée depuis le composant Parent en accédant à la propriété actuelle de la réf.

Remarque : Il est important de rappelez-vous que l'exposition de méthodes impératives sur les composants enfants est généralement déconseillée au profit d'une approche plus déclarative et basée sur les données. Cependant, cette méthode peut être utile dans certains scénarios où vous avez besoin d'un accès direct aux fonctionnalités d'un composant enfant.

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!