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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 1,857评论 0 1
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,303评论 2 21
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,516评论 1 10
  • react 基本概念解析 react 的组件声明周期 react 高阶组件,context, redux 等高级...
    南航阅读 1,091评论 0 1
  • 当今的人们忙着上班,忙着学习,忙着接娃。就连吃饭也要用快餐。生活节奏紧凑快捷。我发现越是这样忙碌的人们也容易生病。...
    书含奶奶阅读 257评论 0 2