Sobes.tech
Middle

¿Es posible en un componente funcional proporcionar acceso externo a los métodos del componente (darle 'manijas' afuera)?

sobes.tech AI

Respuesta de la IA

En los componentes funcionales de React, se puede proporcionar acceso externo a los métodos del componente mediante forwardRef y useImperativeHandle.

Esto permite 'pasar' una referencia y definir qué métodos o propiedades estarán disponibles desde fuera.

Ejemplo:

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>;
});

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

De esta manera, el código externo puede llamar a los métodos increment y reset del componente.