Comment puis-je appeler des méthodes enfants à partir des composants parents dans React ?

Appel de méthodes enfants à partir de composants parents

Dans React, il n'est pas toujours nécessaire d'appeler directement les méthodes enfants. Cependant, il existe des cas où cela peut être nécessaire, par exemple lorsque le composant enfant expose une méthode impérative. Cet article montre comment y parvenir à l'aide de références, à la fois pour les composants basés sur la classe et les composants fonctionnels.

Composants basés sur la classe

Pour appeler une méthode enfant à partir d'un composant basé sur la classe parent à l'aide de références, suivez ces étapes :

1. Créez une référence dans le composant parent en utilisant createRef() :

const childRef = React.createRef();

2. Attribuez la référence au composant enfant :

<Child ref={childRef} />

3. Utilisez childRef pour accéder aux méthodes de l'enfant :

childRef.current.getAlert();

Composants fonctionnels avec Hooks

Avec l'introduction de React Hooks, vous pouvez désormais également utiliser des références dans les composants fonctionnels. Voici comment appeler une méthode enfant à partir d'un composant fonctionnel parent à l'aide de refs :

1. Utilisez le hook useRef() pour créer une référence :

const childRef = useRef();

2. Enveloppez le composant enfant dans forwardRef pour accéder à la référence :

const Child = forwardRef((props, ref) => {
  // ...
});

3. Utilisez le useImperativeHandle hook pour exposer la méthode de l'enfant au parent :

useImperativeHandle(ref, () => ({ getAlert() { alert('clicked'); } }));

4. Utilisez le childRef pour accéder aux méthodes de l'enfant :

childRef.current.getAlert();

Remarque : Il est important de noter que l'utilisation de références pour appeler des méthodes enfants est généralement déconseillée dans React. Il est préférable de transmettre les données et les événements via les accessoires et l'état.

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!