React.HTMLProps<HTMLButtonElement> 破坏了 defaultProps

Question

我的按钮样式组件的 PropTypes 有以下代码

export type Props = {
  size?: 'small' | 'medium' | 'large',
};

StyledButton.defaultProps = {
  size: 'medium',
};

它工作正常，但后来我想包含 HTMLButtonElement 道具来为我的按钮提供交互性。因此我添加了这个：

export type Props = React.HTMLProps<HTMLButtonElement> & {
  size?: 'small' | 'medium' | 'large',
};

StyledButton.defaultProps = {
  size: 'medium',
};

然而，这个改变却让defaultProps抱怨不已。这就是我收到的错误。

Types of property 'size' are incompatible.
    Type 'string' is not assignable to type 'undefined'.ts(2322)

但是，如果我去掉 React.HTMLProps，它会起作用，但这不是我想要的。有人知道这个问题的解决方案吗？

提前致谢。

Answer 1

我认为你必须定义一个新的接口：

export interface Props extends React.HTMLProps<HTMLButtonElement> {
  size?: 'small' | 'medium' | 'large',
};

问题在于React.HTMLProps，或者更确切地说，它的超级接口HTMLAttributes已经包含一个size定义为的属性：

size?: number;

因此，您必须重命名您的财产。