Свойство 'className' не существует для типа '{props: ReactNode; }'

Question

В настоящее время я переношу проект Next.js с JavaScript на TypeScript и столкнулся с ошибкой: Property 'className' does not exist on type '{ props: ReactNode; }'. В Javascript я могу извлечь className из реквизита, но машинописный текст не может найти тип. Вот код:

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

}

Answer 1

Объявление вашего интерфейса NavLinkPropsнеправильно. Вы не должны добавлять props потому что вы распространяете остальную часть объекта, которая будет чем угодно в интерфейсе после href, exact а также children. Интерфейс должен выглядеть так:

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

Итак, объект props, который существует от распространения - ...props было бы:

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

см. этот документ для получения дополнительной информации - https://reactjs.org/docs/jsx-in-depth.html#spread-attributes