Skip to main content

组件封装继承原生接口

LanM

今天在封装 Button 组件的时候,我发现我自己封装的组件用不了 style 和 className 属性的问题。

解决办法

可以使我们自己的接口来继承原生 button 的接口

<ButtonHTMLAttributes<HTMLElement> //原生 button
export interface ButtonProps extends <ButtonHTMLAttributes<HTMLElement>> {
}

但会遇到 接口 ButtonProps 错误扩展接口 ButtonHTMLAttributes的问题。

这是因为自己封装的接口里有一些属性和原生 button 冲突了,例如 ' type ',' disabled ' 等等。

这就要用到 ts 里的 Omit,从类型中剔除一些属性。

剔除一个属性:


Omit< React.InputHTMLAttributes<HTMLInputElement>, 'type'>

剔除多个属性:

Omit<ButtonHTMLAttributes<HTMLElement>, "type" | "disabled">
export interface ButtonProps
extends Omit<ButtonHTMLAttributes<HTMLElement>, "type" | "disabled"> {
type?: ButtonType;
variant?: ButtonStyle;
size?: ButtonSize | string;
children?: string;
disabled?: Boolean;
anime?: Boolean;
shape?: ButtonShape;
onClick?: () => void;
}

解决完接口的问题后,还需要在原生的 button 上加上属性

image

当然,Input 之类的也是同理,这样就大功告成了。

也欢迎访问我的组件库!蓝莓组件库 😆