0

我目前正在将 Next.js 项目从 JavaScript 迁移到 TypeScript，我遇到了一个错误：Property 'className' does not exist on type '{ props: ReactNode; }'. 在 Javascript 中，我可以从道具中提取类名，但打字稿找不到类型。这是代码：

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

}
4

1 回答 1

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

于 2021-10-14T20:48:31.683 回答