Actualmente estoy migrando un proyecto Next.js de JavaScript a TypeScript, y me encontré con un error: Property 'className' does not exist on type '{ props: ReactNode; }' . En Javascript, puedo extraer className de los accesorios, pero TypeScript no puede encontrar el tipo. Aquí está el código:
import { useRouter } from 'next/router' import Link from 'next/link' import { ReactNode } from 'react' export { NavLink } NavLink.defaultProps = { exact: false, } interface NavLinkProps { href: string exact?: boolean children: ReactNode props: ReactNode } function NavLink({ href, exact, children, ...props }: NavLinkProps) { const { pathname } = useRouter() const isActive = exact ? pathname === href : pathname.startsWith(href) if (isActive) { props.className += ' active' } return ( <Link href={href}> <a {...props}>{children}</a> </Link> ) } }Su interfaz que declara NavLinkProps es incorrecta. No debe agregar props porque está extendiendo el resto del objeto, que sería cualquier cosa en la interfaz después de href , exact y children . La interfaz debería verse así:
interface NavLinkProps { href: string exact?: boolean children: ReactNode className: string // any other props you might have } Entonces, el objeto props que existe a partir de la propagación – ...props sería:
{ className, // any other props you might have }consulte este documento para obtener más información: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes