我的按钮样式组件的 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,它可以工作,但这不是我想要的。有人知道这个的解决方案吗?
提前致谢。
最佳答案
我认为你必须定义一个新接口(interface):
export interface Props extends React.HTMLProps<HTMLButtonElement> {
size?: 'small' | 'medium' | 'large',
};
问题是 React.HTMLProps
或者更确切地说,它的超接口(interface) HTMLAttributes
已经包含一个 size
属性定义为:
size?: number;
因此,您将不得不重命名您的属性(property)。
关于reactjs - React.HTMLProps<HTMLButtonElement> 破坏 defaultProps,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54670121/
相关文章:
google-photos-api - 如何使用 Google Photos API 的 baseU
unicode - 为什么 unicode 代码点的 UTF-8 编码不能放入 3 个字节
scala - 使用 Scala 将多列转换为 Spark Dataframe 上的一列 map
amazon-web-services - 是否可以在控制台中编辑 AWS Lambda 层代码?
reactjs - 覆盖 Material UI 扩展面板摘要
angular - 如何使用 typescript 修复 Angular 5 中的 ‘debounc
reactjs - 当 URL 包含多个路径时 React Router 不工作
kubernetes - 在 Kubernetes (GKE) 中的一个节点上组合多个本地 SSD