Me gustaría crear exactamente el mismo comportamiento en la referencia del componente de función que en la referencia del componente de clase.
Aquí hay un ejemplo:
const AnotherComponent = () => { const DoSomething () => console.log(something); return <div> There is a content </div>; } const MyComponent () => { let newRef = useRef(); useEffect(() => { newRef.current.DoSomething(); }, []); return <AnotherComponent ref={newRef} />; }Sé sobre forwardRef, pero por lo que entiendo, le permite vincular la referencia a una entrada específica para obtener sus eventos, pero no al componente ENTERO con todas sus funciones.
¿Es incluso posible lograr esto con componentes de función?
Sí, es completamente posible. Las referencias de React son para algo más que obtener acceso a DOMNodes. Use una combinación de React.forwardRef y el gancho useImperativeHandle React para reenviar una referencia de React a un componente de función y exponer funciones/valores.
const AnotherComponent = React.forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ doSomething })); const doSomething () => console.log(something); return <div> There is a content </div>; });...
const MyComponent () => { const newRef = useRef(); useEffect(() => { newRef.current.doSomething(); }, []); return <AnotherComponent ref={newRef} />; }