首页 > 编程开发 > JavaScript    日期:2023-01-05 / 浏览

目录

父传子

通过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)

觉得上面的内容有用吗?快来点个赞吧!

点赞() 我要打赏

温馨提示 : 本站内容来自会员投稿以及互联网,所有源码及教程均为作者总结编辑,请大家在使用过程中提前做好备份,以免发生无法预知的错误,源码类教程请勿直接用于生产环境!

 可能感兴趣的文章