button
Look at the renderings first
Before building a wheel, we should first think about what the wheel should look like. The idea is very important.
My understanding,
1 demand, what is it created, you can look at the button component of the antd library and model it.
2 Code Next, I will write a very simple component and return to the button
3 interface. When calling the component, what do we need to pass in, type, size, onClick, etc.
4 Optimize, divide the code into several files and put them together, use the type Alias
5 Start to write the code. You can write the css style first. You can use scss, @mixin, @extends@include to write it easily.
Look at the scss code first.
Define variables, 
similar to these public styles, write them first,
and then do
n't put too many styles, just know the outline.
Adhesive
Button button, first of all, it must have several styles:
primary, danger, success, warning, default, and
moreover, there are several lg sm noraml sizes.
According to this, let’s write it first. Writing react components in ts is very different from js. First, ts needs some interfaces, that is, the definition of props. Look at the code first.
This is the code of a component of mine. Common puts some type aliases.
interface
When calling our component from outside, the input can be class name, size, type, etc. Since the button I wrote can be a link, there is also an href type.
enumerate
Let us get the corresponding value more conveniently, which can be obtained through ButtonSize.Base. If each base is hard-coded, it will be too troublesome to modify later.
Type alias
Here is an explanation. First of all, the attributes we passed in, such as autoFocus, etc. on the button, if it’s too troublesome to write one by one, React provides us with React.ButtonHTMLAttributes<HTMLElement>, which can be used. Get all the attributes on the button, and merge it with the interface we wrote through this, not a union, but an &, the second is when the incoming link button is a link button, the essence is the a tag. Then if we only write
such as A&B, then we can only use the attributes shared by AB. If you want to use the unique attributes on the button but the a tag does not, then we can’t use it. ts provides us with Partial<T>. The two interfaces are included so that all the attributes inside become optional. As shown.
Next is our component code
We can use REACT:FC<interface> to write components in the future. What are the benefits? Because if we don’t write it, but just a pure function component, then this Porps is only those properties of the interface you wrote, but when we add this, props not only have the properties of the interface you wrote, but also react’s props itself Has the attributes, such as children and so on.
I used the attribute selector for the splicing type, which is very convenient. We can write the corresponding class name by obtaining the size and type.
Finally, you can set the default props. As shown in the figure above, the effect is as shown in the figure below.
So the most basic Button component is probably ready, you can add several styles and sizes yourself.