编写一个 React 组件库（二）：提取公用 defaultProps

╰半夏微凉° 2022-04-01 04:42 388阅读 0赞

上一次编写了一个简单的 Button 组件：[https://blog.csdn.net/qq593249106/article/details/85319295][https_blog.csdn.net_qq593249106_article_details_85319295]

**当前目录结构**

由于组件库中多个组件的 defaultProps 会有公共部分，于是在 utils 下新建一个 defaultProps.js 文件专门存放公共 defaultProps

首先来观察一下目前 Button 组件用到的 defaultProps ：  
**Button.js**

Button.defaultProps = { 
        children: 'Button',
        className: '',
        size: 'default',
        handleClick: () => { return null},
        disabled: false
    }

可以想到 className 和 size 属性是每个组件都能用到的，于是把它们提取出来，单独写在刚才新建的 defaultProps.js 文件中，记得要 export 出去：  
**defaultProps.js**

const defaultProps = { 
        className: '',
        size: 'default'
    }
    
    export default defaultProps

然后在 Button 组件中 import 进来，然后使用 es6 的 … 语法加到 Button 的 defaultProps 中：  
**index.js**

import defaultProps from '../../utils/defaultProps'
    
    Button.defaultProps = { 
        ...defaultProps,
        children: 'Button',
        handleClick: () => { return null},
        disabled: false
    }

终端输入 npm run dev，会报错，这是因为 webpack 需要安装支持解析 es6 语法的插件：

npm install  babel-preset-es2015
    npm install babel-preset-stage-3 --save-dev

然后在 .balelrc 中配置：  
**.balelrc**

{ 
      "presets": [ "es2015", "stage-3"]
    }

重新运行 npm run dev，打开页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
没有问题，现在修改 defaultProps.js 中的属性，把默认 size 修改为 large 测试一下：  
**defaultProps.js**

const defaultProps = { 
        className: '',
        size: 'large' //默认 size 修改为 large
    }
    
    export default defaultProps

页面发生变化：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]  
没有设置 size 的内容为 normal 的 Button 的 size 变成了 large，成功提取公共 defaultProps

[https_blog.csdn.net_qq593249106_article_details_85319295]: https://blog.csdn.net/qq593249106/article/details/85319295
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220401/76aceae63e2c4199938e12259bcefe69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]: /images/20220401/77da5bdf23a94275aacfd9cbbeb46080.png