react之间的组件传值

关于react组件之间的传值

1.首先是父子组件最基础的传值(举一个todulist的例子)
  • 父传子 采用props的格式
    我们拿这个datas
    react之间的组件传值_第1张图片
    在父组件里引入的子组件上进行传值这张图片显示了吗?emm

    子组件中采用this.props.xx的方式获取
    react之间的组件传值_第2张图片

    效果:
    react之间的组件传值_第3张图片

  • 子传父 通过在父组件引入的子组件中传递一个函数并传参,子组件去触发这个函数更改参数完成数据更新

    - 父组件
    

图片描述
图片描述

- 子组件

react之间的组件传值_第4张图片


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

react之间的组件传值_第5张图片

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

 这里拿一个github搜索用户的小实例
 
 下载引入pubsub并在其中一个组件中发布

react之间的组件传值_第6张图片

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

react之间的组件传值_第7张图片

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

效果:搜索github用户

react之间的组件传值_第8张图片

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

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

最后 在你子组件里用就好啦
react之间的组件传值_第10张图片

 

 

你可能感兴趣的:(js,react)