Как расширить атрибуты HTML в React с Typescript

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 для вашего тега привязки, вам нужно будет использовать этот тип.