属性 'target' 使用 {...props} 时不存在类型错误

Question

我正在制作自定义 link 组件并将 target="_blank" 和 rel="noreferrer" 作为道具传递并使用分配给 <a> 的 {...props}。

const ExternalLinkTwo: React.FC<{
  href: string;
  children: ReactNode;
}> = ({ href, children, ...props }) => (
  <a href={href} {...props}>
    {children}
  </a>
);

export default function App() {
  return (
    <div className="App">
      <ExternalLinkTwo
        href="http://www.google.com"
        target="_blank" //throwing error here, why?
        rel="noreferrer"
      >
        Google 2
      </ExternalLinkTwo>
    </div>
  );
}

在 target 道具上出现此错误

(JSX attribute) target: string Type '{ children: string; href: string; target: string; rel: string; }' is not assignable to type 'IntrinsicAttributes & { href: string; children: ReactNode; } & { children?: ReactNode; }'. Property 'target' does not exist on type 'IntrinsicAttributes & { href: string; children: ReactNode; } & { children?: ReactNode; }'.ts(2322)

Answer 1

如果您的目标是支持正常的 <a> 属性集但需要 href，请使用类似这样的东西...

import { AnchorHTMLAttributes } from "react";

interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  href: string; // make href non-optional
}

const ExternalLinkTwo: React.FC<LinkProps> = ({ href, children, ...props }) => (
  <a href={href} {...props}>
    {children}
  </a>
);

您不需要在道具类型中包含 children。它通过 React.FC.

自动提供

另一种方法是简单地扩展 Record<string, string> 以接受任何额外的属性。

interface LinkProps extends Record<string, string> {
  href: string;
}

属性 'target' 使用 {...props} 时不存在类型错误

Property 'target' does not exist on type error using {...props}

javascript

typescript

ecmascript-6

reactjs