javascript - Egenskapen 'className' finns inte på typen '{ props: ReactNode; }'

Jag migrerar för närvarande ett Next.js-projekt från JavaScript till TypeScript, och jag har stött på ett fel: Property 'className' does not exist on type '{ props: ReactNode; }'. I JavaScript kan jag extrahera className från props men TypeScript kan inte hitta typen. Här är koden:

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>
  )
}

}

Svar #1

Din gränssnittsdeklaration NavLinkProps är fel. Du bör inte lägga till props eftersom du sprider resten av objektet, vilket skulle vara vad som helst i gränssnittet efter href, exact och children. Gränssnittet borde se ut så här:

interface NavLinkProps {
  href: string
  exact?: boolean
  children: ReactNode
  className: string
  // any other props you might have
}

Så props-objektet som finns från spridningen - ...props skulle vara:

{
  className,
  // any other props you might have
}

se detta dokument för mer information - https://reactjs.org/docs/jsx-in-depth.html#spread-attributes

Relaterade artiklar