Sobes.tech
Middle

Est-il possible dans un composant fonctionnel de fournir un accès externe aux méthodes du composant (donner des 'poignées' à l'extérieur) ?

sobes.tech IA

Réponse de l'IA

Dans les composants fonctionnels React, il est possible de fournir un accès externe aux méthodes du composant à l'aide de forwardRef et useImperativeHandle.

Cela permet de 'transmettre' une référence et de définir quelles méthodes ou propriétés seront accessibles depuis l'extérieur.

Exemple :

import React, { useImperativeHandle, forwardRef, useState } from 'react';

const MyComponent = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  useImperativeHandle(ref, () => ({
    increment() {
      setCount(c => c + 1);
    },
    reset() {
      setCount(0);
    }
  }));

  return <div>Count: {count}</div>;
});

// Utilisation
// const ref = React.createRef();
// <MyComponent ref={ref} />
// ref.current.increment();

Ainsi, le code externe peut appeler les méthodes increment et reset du composant.