DetailedHTMLProps和HTMLAttributes有什么区别？

Question

比方说，我有一个组件接口，应该扩展标准<div>元素的接口。编写此代码有何区别：

interface ComponentProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> { ... }

与此相反：

interface ComponentProps extends React.HTMLAttributes<HTMLDivElement> { ... }

Answer 1

let创建ComponentProps类型：

interface ComponentProps1 extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}

interface ComponentProps2 extends React.HTMLAttributes<HTMLDivElement> {}

然后我们可以很容易地检查它们之间的区别：

type Dif = Omit<ComponentProps1, keyof ComponentProps2>;

Dif类型是：

type Dif = {
    ref?: LegacyRef<HTMLDivElement>;
    key?: string | number;
}