编写一个 React 组件库（三）：使用 PropTypes 进行类型检查

客官°小女子只卖身不卖艺 2022-04-01 04:57 233阅读 0赞

继上一次提取了公共 defaultProps ：[https://blog.csdn.net/qq593249106/article/details/85336111][https_blog.csdn.net_qq593249106_article_details_85336111]

为了能通过类型检查错误，可以使用 React 内置的 PropTypes 来检查类型是否合法：  
列如 Button 组件的 props 属性：

*  className：应该是 string 类型
 *  children：应该是任意类型的
 *  size：应该是 small ，default ，large 中的一个
 *  handleClick：应该是函数类型
 *  disabled：应该是 bool 类型

## 使用 PropTypes ##

在 Button 组件引入：  
**Button.js**

import PropTypes from 'prop-types'

设置类型：  
**Button.js**

Button.propTypes = { 
        className: PropTypes.string,
        children: PropTypes.any,
        size: PropTypes.string,
        handleClick: PropTypes.func,
        disabled: PropTypes.bool
    }

修改一下 App.js 测试：  
**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={ 'test'} >small</Button>
                </div>
            )
        }
    }
    
    export default hot(module)(App)

终端输入 npm run dev：打开网页，按 F12 调出控制台可以看到：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]  
出现了类型错误的警告，成功进行了类型检查

接下来优化一下，单独分离出 propTypes.js 文件专门用来处理 proptypes：  
**propTypes.js:**

function getPropTypes(PropTypes, ...args) { 
        // 要导出的 propTypes 对象
        const propTypes = { 
            className: PropTypes.string
        }
        // 单独设置的 propType
        const propTypesSets = { 
            size: PropTypes.oneOf(['small', 'default', 'large']),
            disabled: PropTypes.bool
        }
        // 遍历外部传进来需要设置的数组，找到需要设置的 propType ，然后加入到要导出的 propTypes 对象
        args.forEach((name) => { 
            const propType = propTypesSets[name]
            if(propType) propTypes[name] = propType
        })
        // 返回 propTypes 对象
        return propTypes
    }
    
    export default getPropTypes

然后在 Button.js 中 import 使用：  
\*\* Button.js\*\*

import getPropTypes from '../../utils/propTypes'
    
    Button.propTypes = { 
        ...getPropTypes(PropTypes, 'size', 'disabled'),
        children: PropTypes.any,
        handleClick: PropTypes.func,
        disabled: PropTypes.bool
    }

页面刷新：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]  
没有问题

[https_blog.csdn.net_qq593249106_article_details_85336111]: https://blog.csdn.net/qq593249106/article/details/85336111
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20220401/965acc89adc54652a17034b5e302e538.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70 1]: /images/20220401/843b2272c3884809ae7d0c48c29bbb60.png