Soy muy nuevo en React, tengan paciencia conmigo.
tengo un componente
const Avatar = forwardRef((props, ref) => { const { color, className, size, tag: Tag, ...rest } = props return ( <Tag className={classnames('avatar', { [className]: className, [`bg-${color}`]: color, [`avatar-${size}`]: size })} ref={ref} {...rest} > ... //rest of codes </Tag> ) }) export default Avatar Ahora, puedo hacer esto en javascript
<Avatar size="sm" color="success" />Sin embargo, en Typescript recibiré un mensaje de error.
Property 'size' does not exist on type 'IntrinsicAttributes & RefAttributes<any>' ¿Alguna idea de lo que salió mal? Supongo que necesito pasar la ref , así que lo hago.
const ref = React.createRef<Tag>(); <Avatar ref={ref} size="sm" color="success" /> Pero sigo teniendo el mismo problema, ¿cómo paso el size y color como accesorios? Intenté buscar respuestas en Internet y SO, pero parece que no puedo encontrar una solución, cualquier ayuda será apreciada.
No estoy seguro de si realmente necesita reenviar la referencia o no. Espero que mi respuesta le brinde alguna forma de resolver su caso de uso. Puedo ver que pasa Tag como accesorio y lo usa como etiqueta JSX que no es válida.
Desnudo conmigo, esta pieza de código JSX no es válida
<Tag className={classnames('avatar', { [className]: className, [`bg-${color}`]: color, [`avatar-${size}`]: size })} ref={ref} {...rest} > ... //rest of codes </Tag> debido a que pasa la Tag como accesorio, no puede usarla como etiqueta JSX. Puede pasar una etiqueta JSX como accesorios, pero la implementación no es así. Debería importar esa etiqueta en su lugar o si realmente desea pasarla como accesorio. necesita componerlo en su componente principal.
Como esto
const ParentComponent: React.FC = () => ( <Avatar // You have to compose it here tag={ <Tag // className={classnames('avatar', { // [className]: className, // [`bg-${color}`]: color, // [`avatar-${size}`]: size // })} // ref={ref} // {...rest} > ... //rest of codes </Tag> } /> ); export default ParentComponent;También puede interactuar con la demostración en codesandbox para que pueda tener más idea de lo que estoy tratando de decir. Simplemente haga clic aquí
poner forwardRef en la exportación resuelve los errores de TSLint
const Avatar = (props, ref) => { const { color, className, size, tag: Tag, ...rest } = props return ( <Tag className={classnames('avatar', { [className]: className, [`bg-${color}`]: color, [`avatar-${size}`]: size })} ref={ref} {...rest} > ... //rest of codes </Tag> ) } export default forwardRef(Avatar)