0
点赞
收藏
分享

微信扫一扫

React组件之间的通讯方式

TiaNa_na 2022-04-21 阅读 98
react前端
  1. 父子组件之间通讯

  • 父组件向子组件传递数据

步骤:父组件提供要传递的state数据,并且给子组件标签添加属性,属性值为父组件state中的值,最后在子组件中通过props接收父组件中传递过来的数据。

以以下代码为例: (Parent组件是父组件,Children组件是子组件)

  • 子组件向父组件传递数据

步骤:利用回调函数,父组件提供回调函数(用于接收数据),在子组件标签中添加一个属性,属性值即为该回调函数,并且子组件把要传递的数据,作为回调函数的参数,传递给父组件。

代码如下:

2. 兄弟组件通讯

思路:将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态。

代码如下:(Children1和Children2是兄弟组件,两个组件共同的父组件是Counter组件,Counter组件实现是一个点按钮,数字就会加1的操作,Children1用于展示数字,Children2是一个按钮,Children1和Children2之间需要通信,要知道当前数字是多少,以能够进行加1操作)

 

以上就是React组件之间通讯的三种方式。 

 

举报

相关推荐

0 条评论