React18学习笔记42：Button组件深度解析

import React from "react";
import classNames from "classnames"
export enum ButtonSize{
    Large='lg',
    Small='sm'
}

export enum ButtonType{
    Primary="primary",
    Default="default",
    Danger='danger',
    Link='link',
    
}

interface BaseButtonProps{
    className?:string,
    disabled?:boolean,
    size?:ButtonSize,
    btnType?:ButtonType;
    children:React.ReactNode;
    href?:string;
}

const Button:React.FC<BaseButtonProps>=(props)=>{
    const {
        btnType,
        disabled,
        size,
        children,
        href
    }=props

    const classes=classNames("btn",{
        [`btn-${btnType}`]:btnType,
        [`btn-${size}`]:size,
        'disabled':(btnType===ButtonType.Link)&&disabled
    })
    if(btnType===ButtonType.Link&&href){
        return(
            <a className={classes} href={href}>{children}</a>
        )
    }else{
        return (
            <button className={classes} disabled={disabled}>
                {children}
            </button>
        )
    }  
}
Button.defaultProps={
    disabled:false,
    btnType:ButtonType.Default
}
export default Button
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.