react： 在子组件中 检验父组件传过来的参数是否是想要的参数类型 prop-types

大家好，我是梅巴哥er ， 这里讲个小知识点： 参数的类型验证。

目的：

• 当父组件传过来的参数，不是我们需要的参数类型时，给出警告。

安装：

• npm install prop-types

引入：

• import PropTypes from 'prop-types'

语法：

• static propTypes = { 参数名: PropTypes.数据类型}

案例：

import React, {
    
     Component } from 'react' 
import PropTypes from 'prop-types'


class Header extends Component {
    
    
    // 检验父组件传过来的参数是否符合需要的类型
    static propTypes = {
    
    
        // 要求传过来的参数是字符串形式
        // 不然就会给出警告（不是报错，是warning）
        //这里的string表示 要求传过来的title参数需要是字符串类型
        title: PropTypes.string 
    }
    render() {
    
    
        return (
            <header>
                {
    
     this.props.title }
            </header>
        )
    }
}
class App4 extends Component {
    
    
    render() {
    
    
        return (
            <div>
            	{
    
    /* 这个ttile是字符串类型的123， 没有警告*/}
                <Header title='123' />
                {
    
    /* 这个ttile是数字类型的123， 有警告*/}
                <Header title={
    
     123 } />
            </div>
        )
    }
}

export default App4