详解react hooks组件间的传值方式(使用ts)

2022-04-15 0 678
目录
  • 父传子
  • 子传父
  • 跨级组件(父传后代)

父传子

通过props传值,使用useState来控制state的状态值

父组件 Father.tsx里:

详解react hooks组件间的传值方式(使用ts)

子组件 Child.tsx里:

详解react hooks组件间的传值方式(使用ts)

展示效果:

详解react hooks组件间的传值方式(使用ts)

子传父

跟react的方式一样,像子组件传入回调函数,通过接收子组件的返回值,再去更新父组件的state

父组件,Father.tsx里:

详解react hooks组件间的传值方式(使用ts)

子组件,Child.tsx里:

详解react hooks组件间的传值方式(使用ts)

展示效果:

详解react hooks组件间的传值方式(使用ts)

子传父优化版,使用useCallback存放处理事件的函数

父组件,Father.tsx里:

详解react hooks组件间的传值方式(使用ts)

子组件,Child.tsx里:

详解react hooks组件间的传值方式(使用ts)

跨级组件(父传后代)

使用useContext传值,跟React的Context类似

使用步骤:

创建context使用context.provider关联需要传值的组件引入context,和useContext并获取值

父组件,Father.tsx里:

详解react hooks组件间的传值方式(使用ts)

子组件,Child.tsx里:

详解react hooks组件间的传值方式(使用ts)

孙子组件,Sun.tsx里:

详解react hooks组件间的传值方式(使用ts)

展示效果

详解react hooks组件间的传值方式(使用ts)

到此这篇关于详解react hooks组件间的传值方式(使用ts)的文章就介绍到这了,更多相关react hooks组件传值内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript 详解react hooks组件间的传值方式(使用ts) https://www.niceym.com/19626.html