位置: IT常识 - 正文
React函数式组件传值（父子，兄弟，祖先等）以及父子之间方法的调用。(react函数组件useeffect)
编辑：rootadmin推荐整理分享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进行传值。
上一篇：百度低代码框架amis介绍及实例讲解(低代码框架开发)