您现在的位置是:首页 > Javascript
当前栏目
react子父组件互相通信传值
2023-02-19 12:20:34 时间
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
传给另一个子组件就可以啦~。详细
感谢看完!
相关文章
- 基于 hugging face 预训练模型的实体识别智能标注方案:生成doccano要求json格式
- python读取json格式文件大量数据,以及python字典和列表嵌套用法详解
- 图学习【参考资料2】-知识补充与node2vec代码注解
- Paddle Graph Learning (PGL)图学习之图游走类deepwalk、node2vec模型[系列四]
- Java爬虫框架Jsoup学习记录
- Android开发——获得Json数据,并显示图片
- nodejs事件轮询详述
- JSON and Microsoft Technologies(翻译)
- JS常用的几种设计模式
- pm2:在生产环境中运行 nodejs 应用
- 一些你需要掌握的 tsconfig.json 常用配置项
- 用 nodejs 实现 http 服务版本的 hello world
- 聊聊 JavaScript 的几种模块系统
- Node.js 是怎么找到模块的?
- Node.js 是如何做 GC (垃圾回收)的?
- React 源码:ReactElement 和 FiberNode 是什么?
- JS 当中的函数柯里化和高阶函数
- 数据提取-JsonPath
- Selenium与PhantomJS
- 数据提取-PyQuery