Middle
É possível em um componente funcional fornecer acesso externo aos métodos do componente (dar 'alças' para fora)?
sobes.tech IA
Resposta da IA
Nos componentes funcionais do React podem fornecer acesso externo aos métodos do componente usando forwardRef e useImperativeHandle.
Isto permite 'passar' uma referência e definir quais métodos ou propriedades estarão acessíveis de fora.
Exemplo:
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();
Desta forma, o código externo pode chamar os métodos increment e reset do componente.