react可复用组件

健壮
要对数据类型进行验证

对数据类型进行验证

解决方法：追加属性（类似与面向对象）
通过属性propTypes给对象设置指定数据类型.

BodyIndex.propTypes ={
    userid:PropTypes.number
}

对象必须传参

在任何 PropTypes 属性后面加上 isRequired 后缀，这样如果这个属性父组件没有提供时，会打印警告信息

BodyIndex.propTypes ={
    userid:PropTypes.number.isRequired
}

设置属性默认值

1、在头部定义一个字典常量const，即为默认属性，当父页面没有给子页面传参的时候，就调用默认属性
2、通过配置 defaultProps 为 props定义默认值

const defaultProps = {
    username:"这是一个默认的用户名"
};
...
...
...
BodyIndex.defaultProps = defaultProps;

把页面从父页面得到的参数传给子页面（向孙子页面传参）

...this.props表示继承父页面的所有参数

父页面：
//对组件传参
<BodyIndex userid={123456} 
username={"raoxiaojing"}/>

本页面：
//接收父页面的所有参数
 <BodyChild {...this.props} id={1314} 
handelChildValueChange=
{this.handelChildValueChange.bind(this)}/>

子页面：
//接收来此爷爷页面的参数
<p>{this.props.username} 
{this.props.userid} {this.props.id}</p>