react+ts 造轮子仿antd-button

button

先看效果图

造轮子之前，我们应该先想好，这个轮子应该怎样的，思路很重要。
我的理解，
1 需求，造出来的是怎么样的，可以看看antd库的button组件然后模范。
2 代码 接着我会先写一个很简单的组件，返回button
3 接口，调用组件时我们要传入什么东东，type,size,onClick等等
4 优化，将代码分成几个文件放好，使用类型别名
5 开始编写代码，css样式可以先写好，利用scss，@mixin,@extends@include可以很方便的写
先看scss代码

定义变量，
类似这些公共样式，先写好，
然后

样式就不多放，知道个大概就可以。

接着

Button按钮，首先，它必须有几种风格：
primary,danger,success,warning,default，
再者，他的大小也有几种 lg sm noraml。
按着这个我们先来写，ts写react组件与js大不相同，首先ts需要些接口，也就是props的定义，先看代码

这是我一个组件的代码，common放一些类型别名的东西。

interface

从外部调用我们的组件时，传入的可以是类名，size,type等等，由于我写的按钮可以是链接，故还有个href型。

枚举

让我们更方便的拿到对应的值，通过ButtonSize.Base就可以获取，如果每个都写死base，后期如果要修改的话太麻烦。

类型别名

这里要解释一下，首先，我们传入的属性onClick，或者button上有的比如autoFocus等等这些啊，如果一个一个写太麻烦了，react给我们提供了，React.ButtonHTMLAttributes< HTMLElement >，通过这个可以拿到button上有的所有属性，并且通过这个跟我们自己写的接口合并起来，不是联合，是&,第二个是当传入的是链接按钮时，本质就是a标签。然后如果我们只写
比如 A&B 那我们只可以用AB共有的属性，这些像button上独有的属性想用而a标签没有，那我们就用不了了，ts给我们提供了Partial< T >，将两个接口包含起来，使其里面的属性全部变为可选。如图。

接着就是我们的组件代码啦

我们以后写组件可以用REACT:FC<接口>这样有什么好处呢。因为如果我们不写，只是单纯的函数组件的话，那么这个Porps是只有你写的接口的那些属性，但当我们加了这个后，props不仅有你写的接口的属性，还有react的props自身具有的属性，如children等等。
拼接类型我用了属性选择器，这样很方便的，我们可以通过获取到什么size，type来写对应的类名。
最后可以设置默认props。如上图，效果如下图


这样最基本的一个Button组件就大概做好啦，可以自己加多几种样式，大小。