ProTypes验证器

虽然js扩展中有对类型检查,但是我们可以利用JS内置的类型检查功能
我们可以通过配置类型的proTypes属性，来对类型做检查或者限制
PropTypes包含一整套的验证器，当传递了无效值时会打印警告(由于性能原因只会在开发模式下进行检查)

限制props类型

import PropTypes from "prop-types"

class Greeting extends React.Component {
    render() {
        console.log(Greeting.propTypes)
        return(
            <h1>Hello, {this.props.name}</h1>
        )
    }
}

//对Greeting的propTypes进行限制检查,name属性只能传的值限制为string类型
Greeting.propTypes = {
    name: PropTypes.string
}

export default Greeting

除了string类型 还有 number、array、bool、func等,具体可查看React中文网

限制单个子代

设置属性的默认值

class Greeting extends React.Component {
    render() {
        console.log(Greeting.propTypes)
        return(
            <h1>Hello, {this.props.name}</h1>
        )
    }
}

Greeting.propTypes = {
    name: PropTypes.string
}
//设置默认值
Greeting.defaultProps = {
    name: "stranger"
}