欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-04 12:46:29
目录父传子子传父跨级组件(父传后代)父传子通过props传值,使用usestate来控制state的状态值父组件 father.tsx里:子组件 child.tsx里:展示效果:子传父跟react的方...

父传子

通过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组件传值内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!