React函数式组件传值（父子，兄弟，祖先等）以及父子之间方法的调用。(react函数组件useeffect)

React函数式组件传值（父子，兄弟，祖先等）以及父子之间方法的调用。 一.前言

推荐整理分享React函数式组件传值（父子，兄弟，祖先等）以及父子之间方法的调用。(react函数组件useeffect)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:react函数组件写法,react函数组件与类组件,react组件必不可少的函数,react函数组件useeffect,react组件必不可少的函数,react函数组件写法,react组件必不可少的函数,react组件必不可少的函数,内容如对您有帮助，希望把文章链接给更多的朋友！

react作为一门前端语言，具有独特灵活性，这也是它的魅力所在。前端组件化，也是将整个前端分成了一个一个组件，本期我们讲解的就是react组件之间的传值（包括父子，兄弟，祖先）等等，当然也是自己的见解。废话不多说，上代码

二.父子组件之间的传值

1.首先我们创建两个组件

父元素：person

子元素：chrlidren

 父组件向子组件传值：

父组件像子组件传值通过props去传递，子组件通过props去接收

父：

 子：

 结果：

 子组件向父组件传值：

react子传父，同样通过props，在父组件定义一个函数传递给子组件，子组件将值当参数传参，父组件再保存下来。

父：

 子：

 结果：

 二：非父子组件的传值

其实传值的方式还有很多，比如利用消息订阅，发布机制，redux等等

消息发布订阅机制：

首先需要安装pubsub-js这个库

 然后我们需要导入，这个库

订阅消息；我们通过 subscribe 来订阅消息，它接收两个参数，第一个参数是消息的名称，第二个是消息成功的回调，回调中也接受两个参数，一个是消息名称，一个是返回的数据

 

发布消息：我们通过 publish 来发布消息

结果：

记得在useeffect中的卸载掉。

当然我们也可以通过redux来共享数据，形成组件之间数据的交互，这个我们下期讲解redux

的使用，当然我们也可以使用useContext来实现数据的的交互。

三，父子组件方法的调用1.子组件调用父组件的方法，本质上还是通过props将父组件函数传递给子组件让进行调用。

父：

 

子：

结果：

 2.父组件调用子组件的方法，两种方式。第一种使用forwardRef，第二种使用 useImperativeHandle这里我们使用第二种。

 1.useImperativeHandle有两个参数：

参数1: 父组件传递的ref属性

参数2: 返回一个对象, 以供给父组件中通过ref.current调用该对象中的方法

父：

 子：

结果：

 本章我们只讲了大部分，后续还会讲使用redux进行传值。