React父子组件传值默认值，传值类型

1.传值默认值

defaultProps 父组件调用子组件不传值，则可以在子组件中defaultProps设置默认值

父组件调用时未传值

return (
            <div>                  
                <Son   num='123'></Son>                               
            </div>            
        );

子件可以通过defaultProps设置默认值

Son.defaultProps={
    t:'biaoshi66'
}

            <div>  
                <h2>{this.props.t}</h2>                              
            </div>

2.判断传值类型

子件通过PropTypes定义父组件给子组件传值的类型

import PropTypes  from "prop-types";

Son.propTypes={
    num: PropTypes.number
}
//注意大小写

以上要求父组件传值的num需要是数字类型，若传值为其他类型则控制台会提示

子组件代码

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

class Son extends Component {
    constructor(props){
        super(props);
        this.state={ 
        }
    }
 
    render() {
        return (
            <div>  
                <h2>{this.props.t}</h2>
                <h2>{this.props.num}</h2>                              
            </div>
            
        );
    }
}

//通过PropTypes定义父组件给子组件传值的类型
Son.propTypes={
    num: PropTypes.number
}

Son.defaultProps={
    t:'biaoshi66'
}
//defaultProps 父组件调用子组件不传值，则可以在子组件中defaultProps设置默认值

export default Son;