Estoy usando reaccionar con mecanografiado. Tengo dos componentes, uno es un niño y el otro es un padre. Estoy reenviando ref a mi componente secundario y en mi componente secundario vinculo mi exportación con forwardRef pero recibo un error en la línea de exportación que dice: Argument of type 'FC<ComponentType>' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, ComponentType>'
Aquí está mi código:
import { forwardRef } from 'react'; import './Label.css'; type LabelType = { name: string ref: any } const Label: React.FC<LabelType> = ({name, ref}) => { return <label className='label' ref={ref}> </label>; }; export default forwardRef(Label);La documentación explica cómo funciona forwardRef : debe definir la ref como el segundo parámetro del componente de la función (en lugar de incluirla en los accesorios, que es el primer parámetro). Luego pase su componente de función como primer argumento a forwardRef .
Aquí hay un enlace donde se declara la firma de la función para
forwardRefen la versión actual del paquete@types/react. Puede inspeccionarlo para aprender cómo derivé los tipos en los siguientes ejemplos.
Aquí hay dos formas en que puede implementar las instrucciones anteriores para arreglar su componente actual:
Proporcione los parámetros de tipo genérico apropiados para forwardRef (entonces no necesita anotar el componente de la función directamente):
import {default as React, forwardRef} from 'react'; import './Label.css'; export type LabelProps = { name: string; }; export const Label = forwardRef<HTMLLabelElement, LabelProps>(({name}, ref) => { return (<label className='label' ref={ref}>{name}</label>); }); export default Label;O bien, anote el componente de la función directamente:
import {default as React, forwardRef} from 'react'; import './Label.css'; export type LabelProps = { name: string; }; const Label = forwardRef(( {name}: LabelProps, ref: React.ForwardedRef<HTMLLabelElement>, ): React.ReactElement => { return (<label className='label' ref={ref}>{name}</label>); }); export default Label;