React组件传值的方法

2019-08-15

react之间的组件传值

我又来了haha( ̄▽ ̄)/

关于react组件之间的传值

1.首先是父子组件最基础的传值(举一个todulist的例子)

图片描述图片描述

- 子组件 

图片描述

这就行了!
查看删除效果 这样我们就把煮饺子干掉了

图片描述

2.接下来介绍一款插件,pubsub 这个可以采用发布订阅的方式实现组件间的传值

这里拿一个github搜索用户的小实例

 下载引入pubsub并在其中一个组件中发布

图片描述

前者是键名,后者是键值
在另一个组件中通过pubsub.subscribe订阅

图片描述

拿到数据就可以做后续一系列操作  我这里是一个页面发送搜索内容 一个页面收到搜索内容并通过axios请求搜索内容找到当前github用户

效果:搜索github用户

图片描述

3.通过redux或者react-redux的方式进行各个页面的数据传递,就不用我说了吧?

4.通过上下文的形式做组件传值 这里以react hooks配合函数组件做例子 从react中引入图片描述创建上下文 图片描述在父组件引入子组件的地方采用你刚才创建的上下文.Provider 通过value=传递数据 图片描述

最后 在你子组件里用就好啦 图片描述

以上,是我目前分享的一些react中组件传值的方法 献丑辽....

原文链接:segmentfault.com

上一篇:深入解析vue的生命周期
下一篇:[译]React v16.9 新特性
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部