Tengo 3 archivos tsx (jsx) en mi aplicación de reacción:
Mi index.tsx:
import ReactDOM from 'react-dom'; import Page from './Page'; ReactDOM.render( <Page />, document.getElementById('root') );Luego mi Page.tsx (que represento en el índice ↑):
import React from "react"; import Menu from "./Menu"; export default (props: any) => { let rf = React.useRef<HTMLDivElement>(); return ( <Menu ref={rf}> </Menu> ) }Y mi Menu.tsx, que usa forwardRef:
import React from "react" export default React.forwardRef((props, ref:any) => { return ( <div ref={ref}> </div> ) })El problema es que me da un error en Page.tsx (en el código VS está subrayado la etiqueta de menú de apertura):
Escriba '{ niños: nunca []; ref: MutableRefObject<HTMLDivElement | indefinido>; }' no se puede asignar al tipo 'IntrinsicAttributes & RefAttributes'.
La propiedad 'hijos' no existe en el tipo 'IntrinsicAttributes & RefAttributes'.ts(2322)
Cuando elimino la etiqueta de cierre del Menú (cambiarlo a elemento de cierre automático), funciona:
import React from "react"; import Menu from "./Menu"; export default (props: any) => { let rf = React.useRef<HTMLDivElement>(); return ( <Menu ref={rf} /> ) }Pero quiero (necesito) que me emparejen (para poder escribirle elementos secundarios).
¿Cómo puedo resolverlo? ¡Gracias! :)
<Tag/> significa sin hijos. <Tag></Tag> significa que se lleva a los niños.
Entonces, su error básicamente le dice que está tratando de enviar niños, pero su componente <Menu/> no dice que necesita ninguno.
La solución, react.forwardRef , toma dos argumentos genéricos, el primero es el tipo de elemento DOM que también reenviará la referencia, y el segundo es qué accesorios necesita.
Entonces, al usar esta información, deberíamos poder convertir su ejemplo haciendo ->
import React from "react" export default React.forwardRef<HTMLDivElement,{children: React.ReactNode}>( (props, ref) => { return ( <div ref={ref}> {props.children} </div> ) }) También notará que también eliminé any en la referencia, ahora se escribirá correctamente.
Su otro problema también está en cómo envía la ref , obtendrá 'MutableRefObject<HTMLDivElement | undefined>' ,
Esto se debe a que no ha proporcionado un valor a React.useRef , por lo que el valor puede ser HTMLDivElement o indefinido, y eso es lo que dice el error.
La solución simple simplemente establece el valor predeterminado en nulo, y TS estará feliz. Esto funciona porque MutableRefObject<T | null> , y null es en realidad un componente React válido, básicamente actúa como un renderizado No op.
p.ej.
let rf = React.useRef<HTMLDivElement>(null);Aquí hay un fragmento de TS en funcionamiento. TS Playground