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

继上一次提取了公共 defaultProps ：https://blog.youkuaiyun.com/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 调出控制台可以看到：

出现了类型错误的警告，成功进行了类型检查

接下来优化一下，单独分离出 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
}

页面刷新：

没有问题