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;

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

Answer 2

所以试试这些，因为我查看了网站 https://medium.com/@martin_hotell/react-typescript-and-defaultprops-dilemma-ca7f81c661c7

type Props = Partial<DefaultProps>;

type DefaultProps = Readonly<typeof defaultProps>;

const defaultProps = {
  size: 'small' as 'small' | 'medium' | 'large';
};

export YourClass extends React.Component<Props> { }

这可能是解决您的问题的最简单的方法，但如果不能解决问题，还有其他方法可能会有所帮助。

Answer 3

我还发现，如果您想为 size 属性设置自定义值，那么简单地扩展 React.HTMLProps<HTMLButtonElement> 是行不通的。这是此问题的解决方案。我们需要来自 utility-types 包 (https://github.com/piotrwitek/utility-types#omitt-k)

的小帮手叫 Omit

并像这样使用它：

import { Omit } from 'utility-types';

type BaseButtonProps = Omit<React.HTMLProps<HTMLButtonElement>, 'size'>;

interface ButtonProps {
  size?: 'lg' | 'sm';
}

const Button: React.FC<ButtonProps & BaseButtonProps> = ({ size }) => {
  // size is now 'lg', 'sm' or undefined
};

React.HTMLProps<HTMLButtonElement> 破坏 defaultProps

React.HTMLProps<HTMLButtonElement> breaks defaultProps

reactjs

react-proptypes

styled-components

react-props