Comment puis-je appeler des méthodes de composant enfant à partir d'un composant parent dans React ?

Appel de méthodes enfants à partir du composant parent

Dans React, la communication entre les composants est généralement réalisée via des accessoires (propriétés) et des événements, mais cela est possible d'accéder et d'invoquer les méthodes du composant enfant à partir du composant parent à l'aide de références.

Invocation de méthode à l'aide Refs

1. Envelopper le composant enfant dans forwardRef : Pour accéder à l'instance du composant enfant, enveloppez-la dans forwardRef. Cela permet à React de transmettre la référence comme deuxième argument au composant.
2. Initialiser la référence de l'instance enfant : Dans le composant parent, créez une référence à l'aide de useRef(). Cela stockera la référence à l'instance du composant enfant.
3. Attribuer une référence à l'enfant : Transmettez la référence au composant enfant à l'aide de la prop ref. Ceci attribue l'instance du composant enfant à la référence du composant parent.
4. Exposer les méthodes enfants : Dans le composant enfant, utilisez useImperativeHandle pour renvoyer un objet contenant les méthodes que vous souhaitez exposer au parent.

Exemple avec Hooks

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("getAlert from Child");
    }
  }));

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

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

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

ReactDOM.render(<Parent />, document.getElementById('root'));

Dans cet exemple, getAlert() est une méthode exposée par le composant Child qui peut être invoquée à partir du composant Parent en accédant à la propriété actuelle de childRef. Notez qu'invoquer des méthodes enfants directement depuis le parent n'est pas recommandé et doit être évité en faveur de modèles de communication de composants appropriés.

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!