编写一个 React 组件库（一）：写一个简单的 Button 组件

绝地灬酷狼 2022-04-10 06:29 478阅读 0赞

**这个项目基于webpack，配 webpack 的教程：[https://blog.csdn.net/qq593249106/article/details/84892069][https_blog.csdn.net_qq593249106_article_details_84892069]**

## 简单配置 ##

**当前目录结构：**

## 使用 normalize.css ##

为了消除不同浏览器的影响，在入口文件 index.js引入 normalize.css 来清除不同浏览器的默认样式

import './normalize.css'

在 components 文件夹新建一个 Button 文件夹，在这个文件夹下新建一个 Button.js 文件：  
**Button.js**

import React, {  Component } from 'react'
    
    class Button extends Component { 
        render() { 
            return (
                <button>
                    { this.props.children}
                </button>
            )
        }
    }
    
    export default Button

简单写一下 Button 组件，然后在 test 文件夹下的 App.js 文件中引入 Button 组件：  
**App.js**

终端输入npm run dev，打开网页：  
![在这里插入图片描述][2018122811212988.png]  
组件引用成功，但是 button 标签的默认样式很难看，接下来在当前目录新建一个 Button.scss 修改样式来美化这个 Button 组件，使用 Sass 的语法：  
**Button.scss**

//size 为 small 时的样式
    $btn-small-padding: 4px 8px;
    $btn-small-fontSize: 14px;
    
    //size 为 large 时的样式
    $btn-large-padding: 8px 16px;
    $btn-large-fontSize: 18px; .btn { 
      padding: 6px 12px;
      border-color: #CCC;
      border-radius: 2px;
    
      font-size: 16px;
      font-weight: 400;
      color: #333;
    
      background-color: #fff;
    
      transition: background-color .1s ease;
    
      cursor: pointer; &:hover { 
        background-color: #F9F9F9;
      }
    
      &:active { 
        background-color: #EEE;
      }
    
      &[disabled] { 
        opacity: 0.75;
    
        cursor: not-allowed; &:hover { 
          background-color: #fff;
        }
    
        &:active { 
          background-color: #fff;
        }
      }
    }
    
    .btn-small { 
      padding: $btn-small-padding;
    
      font-size: $btn-small-fontSize;
    }
    
    .btn-large { 
      padding: $btn-large-padding;
    
      font-size: $btn-large-fontSize;
    }

## 使用 classnames ##

为了能让 Button 组件有多个样式选择，于是安装 classnames 插件来帮助切换类名来切换样式：

npm install classnames --save-dev

在 Button.js 中引入 classnames：

import classnames from 'classnames'

然后引入刚才写的 Button.scss 样式：

import './Button.scss'

编写 Button 组件的逻辑代码：  
**Button.js**

import React, {  Component } from 'react'
    import classnames from 'classnames'
    import './Button.scss'
    
    class Button extends Component { 
        render() { 
            const { 
                children,
                size,
                handleClick,
                disabled
            } = this.props
            const className= classnames({  //根据父组件传进来的 size 来判断使用什么类名
                btn: true,
                'btn-small': size === 'small',
                'btn-large': size === 'large'
            })
            return (
                <button
                    className={ className} //动态修改类名
                    onClick={ handleClick} //点击按钮执行的回调函数
                    disabled={ disabled} //禁用按钮
                >
                    { children}
                </button>
            )
        }
    }
    
    Button.defaultProps = { 
        children: 'Button',
        className: '',
        size: 'default',
        handleClick: () => { return null},
        disabled: false
    }
    
    export default Button

目前这个 Button 组件有三个功能：

1.  根据传入的 size 来调整大小
2.  可以传入一个点击 Button 组件执行的函数
3.  传入 disabled 可以禁用 Button

接下来测试一下这三个功能，修改 App.js ：

import React, { Component} from 'react'
    import { hot} from 'react-hot-loader'
    import Button from '../components/Button/Button'
    
    class App extends Component { 
    
        render() { 
            return (
                <div>
                    <Button size={ 'small'} >small</Button>
                    <Button >normal</Button>
                    <Button size={ 'large'}>large</Button>
                    <Button handleClick={ () => { console.log('click');}}>large</Button>
                    <Button handleClick={ () => { console.log('click');}} disabled>disabled</Button>
                </div>
            )
        }
    }
    
    export default hot(module)(App)

刷新页面：  
![在这里插入图片描述][20181228182140638.png]  
**前三个按钮大小分别是 small ，默认 ，large ，实现了：**

1.  根据传入的 size 来调整大小

**接下来测试点击 Button 执行函数，第四个 Button，看控制台：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
**输出了 click ，实现了：**

1.  可以传入一个点击 Button 组件执行的函数

**接下来测试 disabled，鼠标移到第五个 Button 上面，并进行点击：**

**鼠标形状变了，并且点击之后控制台没有输出，实现了：**

1.  传入 disabled 可以禁用 Button

[https_blog.csdn.net_qq593249106_article_details_84892069]: https://blog.csdn.net/qq593249106/article/details/84892069
[2018122811212988.png]: /images/20220402/f0d7af485ee94d3fb2590147b3d6a27a.png
[20181228182140638.png]: /images/20220402/9edda7a85d7d401080bb31aad8ffff71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220402/ffb0521aad804b868e42a3893e8fd2be.png