健壮
要对数据类型进行验证
对数据类型进行验证
解决方法:追加属性(类似与面向对象)
通过属性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>