Actualmente recibo el siguiente error en mi aplicación React:
A los componentes de función no se les pueden dar refs. Los intentos de acceder a esta referencia fallarán. ¿Querías usar React.forwardRef()?
¿Cómo puedo arreglar esto usando forwardRef()?
Mi código es el siguiente:
const Services: FunctionComponent = (): ReactElement => { const servicesRef = useRef(null); return ( <Layout> <ServicesList ref={servicesRef} /> </Layout> ); }; export default Services; const ServicesList: React.FunctionComponent = ({ children }: Props) => { return ( <section className="my-24 md:my-32"> {children && children} </section> ); }; export default ServicesList;function Parent(){ const childRef = React.useRef(null) // do something with your childRef React.useEffect(()=> { childREf.current.focus() },[]) return( <div> <Child ref={childRef} /> </div>) } const Child = React.forwardRef((props, ref) => { console.log(ref.current) return( <div tabIndex={1} ref={ref}> child </div) })Los documentos de reacción explican bien ...
https://reactjs.org/docs/forwarding-refs.html
Envuelva su componente con React.forwardRef y establezca la referencia en el elemento DOM deseado
const FancyButton = React.forwardRef((props,ref)=>( <buttonref={ref} className="FancyButton"> {props.children} </button>) );