Nuevo en TS, por lo que estoy trabajando para implementarlo en un proyecto. No sé cómo se llama esto, así que no puedo buscarlo correctamente. Si alguien tiene el término para eso, entonces cambiaré el título.
Lo que estoy tratando de hacer es pasar el accesorio de size a mi componente y usarlo para crear el elemento HTML correcto. por ejemplo size="h3" crearía un elemento <h3> .
import React from "react"; import styles from "./Header.module.css"; interface Props { children: React.ReactNode; containerStyle?: React.CSSProperties; id: string; size?: string; title?: string; titleStyle?: React.CSSProperties; } export default function Header({ children, containerStyle, id, size = "h3", title, titleStyle, }: Props) { const HeadingTag = size; return ( <div className={styles.headerContainer} style={containerStyle}> <HeadingTag className={styles.header} style={titleStyle} id={id}> {title} </HeadingTag> <div className={styles.close}>{children}</div> </div> ); }`El error que estoy recibiendo es:
TS2322: Escriba '{ niños: cadena | indefinido; nombre de clase: cualquiera; estilo: CSSProperties | indefinido; identificación: cadena; }' no se puede asignar al tipo 'IntrinsicAttributes'.| La propiedad 'hijos' no existe en el tipo 'IntrinsicAttributes'.
import React from "react"; import styles from "./Header.module.css"; interface Props { children: React.ReactNode; containerStyle?: React.CSSProperties; id: string; size?: string; title?: string; titleStyle?: React.CSSProperties; } export default function Header({ children, containerStyle, id, size = "h3", title, titleStyle, }: Props) { const HeadingTag = React.createElement(size, { className: styles.header, style: titleStyle, id }, title); return ( <div className={styles.headerContainer} style={containerStyle}> {HeadingTag} <div className={styles.close}>{children}</div> </div> ); }Su problema es que está tratando de emitir y representar una cadena "h3" como un objeto jsx, lo que naturalmente producirá errores. Una cosa que podría hacer para lograr este objetivo es usar varios tipos, que contengan sus opciones de tamaño como elementos jsx reales, simplemente escriba:
TextSize: h1 | h2 | h3 | ...De esa manera, se asegura de que solo se puedan insertar ciertos tipos válidos específicos, y simplemente puede representar el elemento en su componente.
<TextSize>{title}</Textsize>