react使用props在多个组件之间传递数据

有三个组件,分别是app、list、comment

三个组件之间的关系是comment在list中使用,list在app中使用

此时有数据需要从list传到comment,然后comment传回list,list又将comment传回的数据传给app

代码如下:

comment:list通过props传给comment两个参数,onDelete(func)  index(number)  然后comment又将index传回给list

handleOnDelete(){
  if(this.props.onDelte){
     this.props.onDelete(this.props.index);
  }
}

list拿到了comment传给它的index,现在list要讲index拿到并且传递给app:

<Comment onDelete={this.handleOnDelete} index={i} />

handleOnDelete(index){
  // 这里的index是comment传递过来的
  // 现在要将index传给app
  if(this.props.onDelete){
    this.props.onDelete(index);
  }
}

list的index已经传递过来了,现在可以在app中拿到:

<List onDelete={this.handleOnDelete.bind(this)} />

handleOnDelete(index){
  console.log(index);
  // 打印出来的index是从list中传递过来的
}



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值