详解react hooks组件间的传值方式(使用ts)
更新时间：2021年11月12日 15:46:05 作者：一笑奈何@
本文主要介绍了react hooks组件间的传值方式(使用ts)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
父传子
通过props传值，使用useState来控制state的状态值
父组件 Father.tsx里：
子组件 Child.tsx里：
展示效果：
子传父
跟react的方式一样，像子组件传入回调函数，通过接收子组件的返回值，再去更新父组件的state
父组件，Father.tsx里：
子组件，Child.tsx里：
展示效果：
子传父优化版，使用useCallback存放处理事件的函数
父组件，Father.tsx里：
子组件，Child.tsx里：
跨级组件(父传后代)
使用useContext传值，跟React的Context类似
使用步骤：
创建context使用context.provider关联需要传值的组件引入context，和useContext并获取值
父组件，Father.tsx里：
子组件，Child.tsx里：
孙子组件，Sun.tsx里：
展示效果
到此这篇关于详解react hooks组件间的传值方式(使用ts)的文章就介绍到这了,更多相关react hooks组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
zustand是一个用于状态管理的小巧而强大的库,本文主要介绍了React项目中使用zustand状态管理的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
很多小伙伴反馈React ant 点击导航条闪烁,没有传递具体的参数给点击事件 , 导致在函数内部无法准确判断要展示哪个子菜单,可能导致页面状态的短暂变化,出现闪烁效果,下面给大家分享解决方法,感兴趣的的朋友跟随小编一起看看吧2024-04-04
这篇文章主要为大家详细介绍了React中项目路由配置与跳转方法的相关资料，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-08-08
最近在写项目的时候遇到了一个问题,当编辑完代码后echarts图正常展示 , 可再次刷新页面 , echarts会消失,所以本文给大家介绍了react echarts刷新不显示问题原因和解决方法,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了React文件分段上传实现方法，将文件切成多个小的文件；将切片并行上传；所有切片上传完成后，服务器端进行切片合成；当分片上传失败，可以在重新上传时进行判断，只上传上次失败的部分实现断点续传；当切片合成为完整的文件，通知客户端上传成功2022-11-11
这篇文章主要为大家介绍了Rect Intersection判断两个矩形是否相交的算法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本篇文章主要介绍了React Native如何消除启动时白屏的方法，详细的介绍了解决的方法，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要为大家详细介绍了React中父子组件数据传递和修改的方式及原理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
TypeScript 实际上就是具有强类型的 JavaScript,可以对类型进行强校验,好处是代码阅读起来比较清晰,代码类型出现问题时,在编译时就可以发现,而不会在运行时由于类型的错误而导致报错,这篇文章主要介绍了ReactJS中使用TypeScript的方法,需要的朋友可以参考下2024-04-04
React是一个流行的JavaScript库,用于构建现代前端应用程序,本文将深入探讨如何在React中生成和导出Word文档,感兴趣的小伙伴可以学习一下2023-09-09
最新评论