第10节 React propTypes defaultProps 2019-05-26

一、父组件给子组件传值

1.1 defaultProps

父子组件传值中，如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值。
类.defaultProps

1.2 propTypes

验证父组件传值的类型合法性

（1）引入import PropTypes from 'prop-types';
（2）类.propTypes = {
                name: PropTypes.string
            };

1.3 注意事项

defaultProps、propTypes两者都是定义在子组件里面。

https://reactjs.org/docs/typechecking-with-proptypes.html

二、完整DEMO

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Header extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:"我是一个头部组件"
         };
    }
    render() {
        return (
            

                
---{this.props.title}--- {this.props.num}
            
        );
    }
}

//defaultProps   
//如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值
Header.defaultProps={
    title:'标题'
}

//同行propTypes定义父组件给子组件传值的类型
Header.propTypes={
    num:PropTypes.number
}

export default Header;