Estaba tratando de implementar un componente de reacción de Typography.
Como puede ver a continuación, obtuve la variante como accesorio de entrada y la usé como índice del objeto VariantsMap para obtener el nombre de etiqueta html correspondiente.
Luego usé componentes polimórficos 'como' con estilo para representarlo como una etiqueta html seleccionada.
pero sigo recibiendo este error:
No overload matches this call. Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error. Type 'string' is not assignable to type 'undefined'.
Encontré en @types/styled-component que los accesorios 'as' pueden ser 'nunca | indefinido', y mi varianteMap devuelve el tipo de cadena.
Pero realmente quiero usar este accesorio 'como' con mi función de selección de etiquetas html específica de variante.
¿Hay alguna manera de resolver este problema?
const variantMap = { h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subheading1: 'h6', subheading2: 'h6', body1: 'p', body2: 'p', }; export const Typography = ({ variant : string }) => { const selectedComponent = variantMap[variant]; return (<TypographyRoot as={selectedComponent} variant={variant} {...props} > {children} </TypographyRoot>); }En primer lugar, export const Typography = ({ variant : string }) => {} no es una sintaxis válida.
Acaba de cambiar el nombre de la variant desestructurada a string . No proporcionaste un tipo.
La razón por la que tiene un error incluso con un tipo de string válido como aquí export const Typography = ({ variant }:{variant: string}) => {} es que variantMap espera como clave h1 | 'h2' |'h3' ... teclas mientras que la string es mucho más ancha. Apuesto a que no desea asignar foo string a la propiedad variant .
Para solucionarlo, solo necesita hacer que variantMap sea inmutable y aplicar la restricción adecuada a variantMap :
import React from 'react' import styled from "styled-components"; const Div = styled.div` color: red; `; const VariantMap = { h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subheading1: 'h6', subheading2: 'h6', body1: 'p', body2: 'p', } as const; type Props = { variant: keyof typeof VariantMap } export const Typography = ({ variant }: Props) => { const selectedComponent = VariantMap[variant]; return <Div as={selectedComponent} /> } Ahora styled-component está feliz.
Hacer el mapa inmutable me salvó. ¿Puede explicar por qué no hacer que el mapa sea inmutable hace que Typescript se queje?
Sin as const todos los valores de VariantMap se deducen como una string en lugar de los literales "h1", "h2" . Lo que a su vez afecta a selectedComponent , ya que esta const representa un valor de VariantMap . Me refiero a que el componente selectedComponent se convierte en una string normal en lugar de una cadena literal, mientras as propiedad espera una cadena literal estricta h1, h2, h3, ...