reactjs - DetailedHTMLProps 和 HTMLAttributes 有什么区别？

Question

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

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;
}