react子父组件互相通信传值

react子父组件互相通信传值

写在前面：

• 本文作为本人学习总结之用，同时分享给大家~

• 个人前端博客网站：https://zhangqiang.hk.cn

• 欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

• 子父组件传值源码地址：JACK-ZHANG-coming/react-demo-project: 用于存放一些react相关的基础例子； (github.com)

本系列你将能学到：

• 父组件传值与函数给子组件，在子组件可使用父组件的值与函数； （该章链接：https://juejin.cn/post/6991470029736771615）
• 子组件传值与函数给父组件，在父组件里面可使用子组件里面的值与函数；（该章链接：https://juejin.cn/post/6992215510104408101）
• 子组件传值与函数给子组件，在子组件里面可使用另一个子组件的值与函数；（该章链接：https://juejin.cn/post/6992576182357082142）

---

1 父组件传值与函数给子组件，在子组件可使用父组件的值与函数

• 主要是通过react三大属性之一props来进行。详细

---

2 子组件传值与函数给父组件，在父组件可使用子组件的值与函数

• 通过react的hooks新特性，useRef、useImperativeHandle、forwardRef 来实现。

useRef :

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。

useImperativeHandle :

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用。

forwardRef ：

React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。详细

---

3 子组件传值与函数给子组件，在子组件可使用另一个子组件的值与函数

• 其跟子传父的实现方法差不多，通过react的hooks新特性，将useRef建立的实例再通过props传给另一个子组件就可以啦~。详细

---

感谢看完！