DetailedHTMLProps 和 HTMLAttributes 之间有什么区别？

Question

假设我有一个组件接口，它应该扩展标准<div>元素的接口。写这个有什么区别：

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

与此相反：

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

Answer 1

让我们创建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;
}