如何使用Typescript在React中扩展HTML属性

Question

在包装简单的HTML元素时，请以此MyLink标记为例：

// MyLink.tsx
import React from 'react';
import { Omit } from 'type-zoo';

interface MyLinkProps
  extends Omit<?, 'href'> {
  to: string;
  children: React.ReactNode;
}

export const MyLinkProps: React.FC<MyLinkProps> = ({
  children,
  to,
  ...attributes
}) => (
  <a href={to} {...attributes}>
    {children}
  </a>
);

// Elsewhere
<MyLink to="https://example.com">Example</MyLink>

我似乎可以用以下任何一个换掉?：

• React.HTMLProps<HTMLAnchorElement>
• React.HTMLAttributes<HTMLAnchorElement>
• React.AnchorHTMLAttributes<HTMLAnchorElement>

但究竟应该在这里使用什么呢？如果它变化，人们如何选择？

Answer 1

我会说React.HTMLProps<HTMLAnchorElement>，因为这是最具描述性的类型。例如，如果要为锚标记提供ref属性，则需要使用此类型。