react之组件通信（父与子，子与父）

最新推荐文章于 2024-12-03 16:09:51 发布

原创最新推荐文章于 2024-12-03 16:09:51 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了React中父子组件之间的数据传递方法。父组件通过props将数据传给子组件，子组件则通过绑定事件并调用父组件的方法实现数据回传。文章通过具体代码示例，清晰展示了这一过程。

父给子传递

通过props传递数据或者方法, 子组件用this.props.xxx进行接收
eg:

//父组件
<div>
 <child content={item}/>
</div>

//子组件 child
<div>
 {this.props.content}
</div>

子给父传递

子组件绑定事件，然后通过this.props.xxx() 调用父组件中的方法，去修改父组件中的数据

//子组件
<div onclick={this.handleClick.bind(this)}>
  {this.props.content}
</div>

handleClick() {
  //调用父组件中的 yyy()
  this.props.xxx(data)
}

//父组件
<div>
 <Parent xxx={this.yyy.bind(this)}/> //把方法传递给子组件
</div>

yyy() {
 //修改数据
}