React封装组件的问题

欢迎关注我的公众号噢！

以Button为例

在封装Button组件的时候，可能会遇到使用自己封装的组件使用不了className以及style属性的问题。

解决办法

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

<ButtonHTMLAttributes<HTMLElement> //原生button

export interface ButtonProps extends <ButtonHTMLAttributes<HTMLElement>> {
}

但也许会遇到 接口“ButtonProps”错误扩展接口“ButtonHTMLAttributes<HTMLElement>” 的问题。

是因为自己封装的接口里有一些属性和原生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上加上属性

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

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