我正在组件中构造一个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,但它没有帮助
2条答案
按热度按时间carvr3hs1#
经过多次试验,
AnchorHTMLAttributes<"href">
或React.AnchorHTMLAttributes<"href">
似乎可以工作,但通过"/"
的父母不符合条件。事后看来,这听起来很愚蠢,但
href: string
工作得很好7cjasjjr2#
Pick在这里不起作用,因为Pick<LinkProps,“href”>将返回一个包含链接属性的对象定义。如果我是你,我会直接这么做。