reactjs - React.HTMLProps 破坏 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

我认为你必须定义一个新接口(interface):

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

问题是 React.HTMLProps 或者更确切地说，它的超接口(interface) HTMLAttributes 已经包含一个 size 属性定义为:

size?: number;

因此，您将不得不重命名您的属性(property)。