先创建一个自定义组件，这次不用箭头函数，用普通函数。

//这是个用函数方式创建的自定义组件，记得函数名首字母大写
function Hi(props) {
    return (
        <div>
            你好, {props.lastName} {props.firstName}
        </div>
    )
}

我们来使用一下：

<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi(props) {
        return (
            <div>
                你好, {props.lastName} {props.firstName}
            </div>
        )
    }
    
    ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>

Hi组件使用到了两个属性，并且这两个属性很明显是string类型，然而在使用中我们给firstName属性传入了一个bool类型的值，没有给lastName属性赋值。

有没有办法给属性值加上类型检查之类的验证呢？使用组件的静态propTypes属性，它是个对象。比如我们要给firstName加上验证，那就要在propTypes中添加一个键名为firstName，键值为一个函数，函数有三个输入参数，分别是props，propName，componentName。来看下怎么用：

<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react库用development版本，propTypes才会起作用 -->
<script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi(props) {
        return (
            <div>
                你好, {props.lastName} {props.firstName}
            </div>
        )
    }
    
    Hi.propTypes = {
        //props就是Hi组件的props，propName这里就是firstName
        firstName(props, propName, componentName) {
            //props[propName]就是取得Hi组件firstName的值
            if(typeof props[propName] !== 'string') {
                return new Error(`${componentName}的${propName}属性的值应是字符串类型`)
            }
        }
    }
    
    ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>

效果如图1。

图1

firstName和lastName的验证是一样的，之前提到过复用，我们可以把公共代码抽取成一个函数。

<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react库用development版本，propTypes才会起作用 -->
<script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi(props) {
        return (
            <div>
                你好, {props.lastName} {props.firstName}
            </div>
        )
    }
    
    //公共代码包裹到string函数里，并放到一个对象中统一管理
    const PropTypes = {
        string(props, propName, componentName) {
            if(typeof props[propName] !== 'string') {
                return new Error(`${componentName}的${propName}属性的值应是字符串类型`)
            }
        }
    }
    
    Hi.propTypes = {
        //键为要验证的属性名，值为函数
        firstName: PropTypes.string,
        lastName: PropTypes.string
    }
    
    ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>

其实react团队早已为我们准备好了PropTypes包供我们使用，我们只要引入就好了。

<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react库用development版本，propTypes才会起作用 -->
<script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    function Hi(props) {
        return (
            <div>
                你好, {props.lastName} {props.firstName}
            </div>
        )
    }
    
    Hi.propTypes = {
        //引入prop-types后，使用方式和之前相同
        firstName: PropTypes.string,
        lastName: PropTypes.string
    }
    
    ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>

更具体的使用方式请查看prop-types包的文档。

其实定义react组件不仅可以使用函数的方式，还可以使用class，也就是类的方式来定义。用类的方式定义的组件如何使用prop-types包呢？看代码：

<div id="rootElement"></div>
<!-- <script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script> -->
<!-- react库用development版本，propTypes才会起作用 -->
<script src="https://unpkg.com/react@16.8.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
    const rootElement = document.getElementById('rootElement')
    
    class Hi extends React.Component {
        //定义成静态属性
        static propTypes = {
            firstName: PropTypes.string,
            lastName: PropTypes.string
        }
        
        render() {
            const {lastName, firstName} = this.props
            return (
                <div>
                    你好, {lastName} {firstName}
                </div>
            )
        }
    }
    
    ReactDOM.render(<Hi firstName={true} />, rootElement)
</script>

最后提醒大家注意，当你要真正发布产品的时候，请使用react.production包，它不会使用PropTypes，因为PropTypes会大大降低程序的性能。所以我们在开发的时候才用react.development。