如何获取HOC的NextJS URL类型?

ss2ws0br  于 2022-10-21  发布在  其他
关注(0)|答案(2)|浏览(123)

我正在组件中构造一个Link,并且需要接受href作为道具。然而,我在定义这种类型时遇到了问题。

import React from "react;
import Link, { LinkProps } from "next/link";

type MyComponentProps = {
  href: Pick<LinkProps, "href">
}

export const MyComponent: React.FC<MyComponentProps> = ({ href }) => (
  <Link href={href}>
    <a>Some Link Text</a>
  </Link>
);

我收到一个输入错误:

Type 'Pick<InternalLinkProps, "href">' is not assignable to type 'UrlObject'.
    Types of property 'href' are incompatible.
      Type 'Url' is not assignable to type 'string | null | undefined'.
        Type 'UrlObject' is not assignable to type 'string'.ts(2322)
link.d.ts(6, 5): The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & { css?: Interpolation<Theme>; } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>'

如何在此组件道具中定义href的类型?
我看到了this resource,但它没有帮助

carvr3hs

carvr3hs1#

经过多次试验,AnchorHTMLAttributes<"href">React.AnchorHTMLAttributes<"href">似乎可以工作,但通过"/"的父母不符合条件。
事后看来,这听起来很愚蠢,但href: string工作得很好

7cjasjjr

7cjasjjr2#

Pick在这里不起作用,因为Pick<LinkProps,“href”>将返回一个包含链接属性的对象定义。如果我是你,我会直接这么做。

相关问题