Estoy tratando de crear el componente de encabezado y cuando agrego el accesorio "testId", obtengo el siguiente tipo. mensaje -->
Escriba '{ niños: ReactNode; ID de prueba: cadena | indefinido; }' no se puede asignar al tipo 'IntrinsicAttributes & ClassAttributes & HTMLAttributes'. La propiedad 'testId' no existe en el tipo 'IntrinsicAttributes & ClassAttributes & HTMLAttributes'
Pero cuando uso "id" en lugar de "testId", no obtengo un error de tipo, lo cual es extraño. Me gustaría usar "testId" para el accesorio de encabezado y no estoy seguro de qué tipo debo asignar. ¿Qué me estoy perdiendo? https://codesandbox.io/s/flamboyant-leftpad-l3bhj?file=/src/App.tsx
import "./styles.css"; import * as React from "react"; interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> { headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"; children?: React.ReactNode; testId?: string; } const Heading: React.FunctionComponent<HeadingProps> = ({ headingLevel: HeadingLevel = "h1", children, testId }: HeadingProps) => { return <HeadingLevel testId={testId}>{children}</HeadingLevel>; }; const App: React.FC<{ headingText: string; description: string }> = () => ( <div> <Heading headingLevel="h2" testId="test-heading"> Hello World! </Heading> </div> ); export default App;El problema está en la siguiente línea:
return <HeadingLevel testId={testId}>{children}</HeadingLevel>;testId no es un atributo HTML válido. Debe usar testId como accesorio de encabezado y usar un JSON para atributos personalizados en el componente HeadingLevel.
import "./styles.css"; import * as React from "react"; interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> { headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"; children?: React.ReactNode; testId?: string; } const Heading: React.FunctionComponent<HeadingProps> = ({ headingLevel: HeadingLevel = "h1", children, testId }: HeadingProps) => { const attrs = {"testId": testId} return <HeadingLevel {...attrs}>{children}</HeadingLevel>; }; const App: React.FC<{ headingText: string; description: string }> = () => ( <div> <Heading headingLevel="h2" testId="test-heading"> Hello World! </Heading> </div> ); export default App;Hay un error tipográfico en su acceso. Usted especifica testId en la interfaz, pero en la implementación intenta acceder a testingId que no coincide con la firma de su interfaz. Además, el uso de una id normal funcionó porque es un atributo válido para todos los elementos. Aquí está el código corregido:
import "./styles.css"; import * as React from "react"; interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> { headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"; children?: React.ReactNode; testId?: string; } const Heading: React.FunctionComponent<HeadingProps> = ({ headingLevel: HeadingLevel = "h1", children, testId // typo was here }: HeadingProps) => { return <HeadingLevel>{children}</HeadingLevel>; }; const App: React.FC<{ headingText: string; description: string }> = () => ( <div> <Heading headingLevel="h2" testId="test-heading"> {/* typo was here */} Hello World! </Heading> </div> ); export default App;