admin管理员组文章数量:1324847
I have a simple anchor tag ponent that extends the native <a>
tag.
I've defined my typescript interface to extend React.HTMLAttributes<HTMLAnchorElement>
, but when I attempt to use ponent A
and pass props like rel
and target
I get IntrinsicAttributes errors.
How can I extend the anchor tag properly?
Component definition:
interface Props extends React.HTMLAttributes<HTMLAnchorElement> {
href: string;
className?: string;
}
export const A: FC<Props> = ({ href, className, children, ...rest }) => {
const baseClasses = "text-mb-green-200";
const classes = `${baseClasses} ${className ? className : ""}`;
return (
<a {...rest} href={href} className={classes}>
{children}
</a>
);
};
Attempted use:
<A {...rest} href={href} className={classes} rel={rel} target={target}>
{children}
</A>
TS Error:
Type '{ children: ReactNode; href: string; className: string; target: string; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Property 'rel' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.ts(2322)
I have a simple anchor tag ponent that extends the native <a>
tag.
I've defined my typescript interface to extend React.HTMLAttributes<HTMLAnchorElement>
, but when I attempt to use ponent A
and pass props like rel
and target
I get IntrinsicAttributes errors.
How can I extend the anchor tag properly?
Component definition:
interface Props extends React.HTMLAttributes<HTMLAnchorElement> {
href: string;
className?: string;
}
export const A: FC<Props> = ({ href, className, children, ...rest }) => {
const baseClasses = "text-mb-green-200";
const classes = `${baseClasses} ${className ? className : ""}`;
return (
<a {...rest} href={href} className={classes}>
{children}
</a>
);
};
Attempted use:
<A {...rest} href={href} className={classes} rel={rel} target={target}>
{children}
</A>
TS Error:
Type '{ children: ReactNode; href: string; className: string; target: string; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Property 'rel' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.ts(2322)
Share
Improve this question
asked Nov 17, 2020 at 19:08
marzipanmarzipan
1712 silver badges14 bronze badges
1 Answer
Reset to default 11Use React.AnchorHTMLAttributes
instead of React.HTMLAttributes
.
I found this out by looking in the node_modules/@types/react/index.d.ts
file and doing a file-search for rel?:
interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
}
本文标签:
版权声明:本文标题:javascript - React: Typescript not recognizing intrinsic attributes when extending HTMLAnchorElement - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742149967a2423007.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论