Solía tener referencias en mi componente al renderizar, y funcionó:
// props.children is ReactElement<HTMLDivElement>[] const [childRefs] = useState<RefObject<any>[]>(props.children.map(() => createRef())); // working code, all the variables (props, childRefs etc) are defined earlier in scope return <div {...props}> { props.children.map((c, i) => <div key={i} ref={childRefs[i]}>{c}</div >) } </div> Básicamente, estoy usando las referencias para establecer imperativamente directamente algunas transformaciones al estilo a medida que el mouse se mueve en el evento JS mousemove .
Sin embargo, ahora necesito inyectar alguna clase de CSS en el componente pasado automáticamente. Creé un componente (llamado Layer ) que toma el elemento secundario, lo clona, establece la clase CSS y lo devuelve:
function Layer(props:LayerProps){ const elem = cloneElement(props.children, {...props.children.props, className: styles['layer'] }); return elem; }También he actualizado el componente principal de esta manera:
return <div {...props}> { props.children.map((c, i) => <Layer key={i} ref={childRefs[i]}>{c}</Layer>) } </div> Sin embargo, ahora mis ref no se pasan ahora, comprensiblemente, ya que el componente funcional Layer no puede tener una ref (ya que es una función). Cuando trato de establecer la ref en Layer , no puedo y tengo este error (comprensiblemente):
(property) ref: React.RefObject<any> Type '{ children: ReactElement<HTMLDivElement, string | JSXElementConstructor<any>>; key: number; ref: RefObject<any>; }' is not assignable to type 'IntrinsicAttributes & LayerProps'. Property 'ref' does not exist on type 'IntrinsicAttributes & LayerProps'.ts(2322) Si trato de reenviar la ref usando forwardRef , no tiene nada para configurar esa referencia, ya que solo estoy modificando el elemento secundario pasado y devolviéndolo, no devolviendo un nuevo elemento como <div>...</div> que podría reenviar ref como <div ref={forwardedRef}>...</div> .
¿Cómo puedo modificar la clase CSS y mantener una ref al objeto? Sé cómo hacer cada uno (si solo necesito agregar la clase I cloneElement , si solo necesito hacer una referencia, uso forwardRef y lo paso al componente secundario en JSX), pero no pude averiguar si podía hacer ambas cosas. al mismo tiempo.
¿Cómo puedo hacerlo?
De acuerdo, después de un poco de excavación y experimentación, me di cuenta de que puedo dar ref "prop" (que técnicamente no es un apoyo real, pero de todos modos) en cloneElement como cualquier apoyo.
Terminé reenviando la referencia al componente funcional y proporcioné la ref como accesorio para el elemento recién clonado, y funcionó.
Sin embargo, las definiciones de TypeScript marcan incorrectamente la propiedad ref como inexistente mientras funciona perfectamente. Sin embargo, lo necesitaba para lanzar los accesorios a any para silenciar el error de linter:
const Layer = forwardRef((props:LayerProps, ref:any) => { const elem = cloneElement(props.children, {...props.children.props, className: `${props.children.props.className ?? ''} ${styles['layer']}`, ref: ref } as any); // as any fixes ref complaining return elem; });Y en muchos componentes:
return <div {...props}> { props.children.map((c, i) => <Layer key={i} ref={childRefs[i]}>{c}</Layer>) } </div>