react.js关于props传值-小笔记

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是数组对象,则用[]
    }
  }

猜你喜欢

转载自blog.csdn.net/An_ape/article/details/76222421