React 父子组件之间的通信传值

8 篇文章 0 订阅
7 篇文章 0 订阅

React 父子组件之间的通信传值

这里给大家分享一下我的项目中关于 React 父子组件之间的通信传值 的解决方案,亲测无问题,如有问题或者优化的地方还请大佬在评论区指出,O(∩_∩)O哈哈~ 废话不多说,贴出代码

子组件向父组件传递参数,控制父组件的状态

//父组件
class Parent extends React.Component {
//声明构造函数用来给子组件赋值
  constructor(props) {
    super(props)
    this.updateParent= this.updateParent.bind(this);
  }

  updateParent(someValue:any) {
    console.log(someValue);//在这里就可以取到子组件传来的值
    this.setState({
      someState: someValue
    })
  }

  render() {
    return <Child updateParent= {this.updateParent} />
  }
}

//子组件
class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.updateParent(someValue)}/ >
  }
}

而父组件向子组件传值则相对简单的多


父组件给子组件赋值
<Children data={this.state.data} />

子组件获取:
this.props.data

完毕,嘤嘤嘤~如有不懂,我的QQ1547164339

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值