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

我还发现，如果要为React.HTMLProps<HTMLButtonElement>道具设置自定义值，则仅扩展size无效。这是此问题的解决方案。我们需要 Omit软件包（https://github.com/piotrwitek/utility-types#omitt-k）中称为utility-types的小助手

并像这样使用它：

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

3 个答案: