Reactjs React.HTMLProps破坏默认属性
我的按钮样式组件的PropTypes有以下代码Reactjs React.HTMLProps破坏默认属性,reactjs,styled-components,react-props,react-proptypes,Reactjs,Styled Components,React Props,React Proptypes,我的按钮样式组件的PropTypes有以下代码 export type Props = { size?: 'small' | 'medium' | 'large', }; StyledButton.defaultProps = { size: 'medium', }; 它工作得很好,但后来我想加入HTMLButtoneElement道具,为我的按钮提供交互性。因此,我补充说: export type Props = React.HTMLProps<HTMLButtonEleme
export type Props = {
size?: 'small' | 'medium' | 'large',
};
StyledButton.defaultProps = {
size: 'medium',
};
它工作得很好,但后来我想加入HTMLButtoneElement道具,为我的按钮提供交互性。因此,我补充说:
export type Props = React.HTMLProps<HTMLButtonElement> & {
size?: 'small' | 'medium' | 'large',
};
StyledButton.defaultProps = {
size: 'medium',
};
但是,如果我去掉React.HTMLProps,它会工作,但这不是我想要的。有人知道解决这个问题的办法吗
提前感谢。我认为您必须定义一个新的界面:
export interface Props extends React.HTMLProps<HTMLButtonElement> {
size?: 'small' | 'medium' | 'large',
};
因此,您必须重命名您的属性。因此,在我查看站点时,请尝试这些方法
这也许是解决您的问题的最简单的方法,尽管还有其他方法可能会有所帮助。我还发现,如果您想为大小属性设置自定义值,简单地扩展React.HTMLProps是行不通的。这里有一个解决这个问题的方法。我们需要 实用程序类型包中名为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
};
我发现此错误类型“small”不可分配给类型“number | undefined”。ts2430。。。看来我没法超越道具size@Neill更新答案。您与现有HTML属性发生冲突。我正在使用样式化组件
size?: number;
type Props = Partial<DefaultProps>;
type DefaultProps = Readonly<typeof defaultProps>;
const defaultProps = {
size: 'small' as 'small' | 'medium' | 'large';
};
export YourClass extends React.Component<Props> { }
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
};