1、组件内部是通过this.props的方法取到组件的参数的,如果this.props里面有需要的属性,就采用相同的属性。
使用一个组件时,把参数放入到标签的属性当中,所有的属性都会作为props对象的键值对。
使用该组件的父组件都可以传入参数类配置该组件。
2、数据类型:字符串、数字、对象、数组、函数
3、父组件传值子组件:(上层组件在这里称为父组件)
父:<children comments={comment} />
传入comment数据
子:this.props.comments
this.props.comments接收来自父组件的数据
子组件反馈值给父组件
子:this.props.Comment(this.props.index)
子组件通过this.props接收来自父的数据 。
父:
<children index={1} Comment = {this.handleComment.bind(this)} />
// 当子组件调用Comment时,会调用来自父组件的props.Comment 。
//并且父组件调用函数handleComment
handleComment (index){
console.log(index)
}
在这里,我的理解是:前面有说,参数放入到标签的属性当中,所有的属性都会作为props对象的键值对,既然是对象object,键值对指向的地址一样,那值有改变,自然就将值反馈到父组件Comment 值改变。
4、在初始化组件值时,一定要考虑当值为空时。将
this.state ={
X1 = '',
x2 = []
}
高级组件,在初始化时,有传入参数this.props,要注意传入值是否为null或者其他的空值。在子组件中,可能在使用时无法解析 所以:
constructor (props) {
super(props)
this.state = {
x1: props.data || '' ,
//根据x1的类型来使用空值类型的定义,比如x1是数组对象,则用[]
}
}