react推崇的是单向数据流,自上而下进行数据的传递,但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多,如果只是父子级关系,父级可以将一个回调函数当作属性传递给子级,子级可以直接调用函数从而和父级通信。

组件层级嵌套到比较深,可以使用上下文Context来传递信息,这样在不需要将函数一层层往下传,任何一层的子级都可以通过this.context直接访问。

兄弟关系的组件之间无法直接通信,它们只能利用同一层的上级作为中转站。而如果兄弟组件都是最高层的组件,为了能够让它们进行通信,必须在它们外层再套一层组件,这个外层的组件起着保存数据,传递信息的作用,这其实就是redux所做的事情。

组件之间的信息还可以通过全局事件来传递。不同页面可以通过参数传递数据,下个页面可以用location.query来获取。

react 组件之间的通信的更多相关文章

  1. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  2. 关于react组件之间的通信

    才开始学react刚好到组件通信这一块,就简单的记录下组件间的通信方式:父到子:props.context,子到父:自定义事件.回调,兄弟组件:共父props传递.自定义事件import React, ...

  3. react组件之间的通信

    通过props传递 共同的数据放在父组件上, 特有的数据放在自己组件内部(state),通过props可以传递一般数据和函数数据, 只能一层一层传递 一般数据-->父组件传递数据给子组件--&g ...

  4. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

  5. React 学习(六) ---- 父子组件之间的通信

    当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...

  6. react组件之间的几种通信情况

    组件之间的几种通信情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1,父组件向子组件传递 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过 ...

  7. react第十七单元(redux和组件之间的通信,react-redux的相关api的用法)

    第十七单元(redux和组件之间的通信,react-redux的相关api的用法) #课程目标 什么是redux-redux react-redux的作用是什么 react-redux如何应用 #知识 ...

  8. React 组件之间通信 All in One

    React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...

  9. react 实现组件嵌套以及子组件与父组件之间的通信

    当子组件触发onChange事件时,实际调用的是父组件中的handelSelect函数,通俗来说就是父组件通过属性handleSelect实现与子组件之间的通信. 父组件:SignupForm 子组件 ...

随机推荐

  1. codeforces_1066_B.Heaters

    题意:一个数组只含有0或1,1表示该元素可以覆盖其自身.左边r-1个元素和右边r-1个元素,问最少保留多少个1元素可以覆盖整个数组. 思路:一个指针指向当前未被覆盖的最左边的元素下标,每次找离它最远且 ...

  2. 网络编程 - 协议遇到IO自动切换

    一.协议遇到IO自动切换 python网络编程,遇到IO自动切换,通过模块gevent来实现: import gevent,time def g1(): print ("g1 is star ...

  3. js页面跳转定位

    A页面 <!DOCTYPE html> <html> <head> <meta name="viewport" content=" ...

  4. KBE_运作流程

    图片来自官方手册:Switch Fabric:交换机网络,根据网络环境的不同而不同,根据用户自己的情况进行配置,不属于引擎范畴. 运作流程 Client连接Loginapp通过API连接,如下示例: ...

  5. PHP实现微信第三方登录的方法

    本文实例讲述了PHP版微信第三方实现一键登录及获取用户信息的方法.分享给大家供大家参考,具体如下: 注意,要使用微信在第三方网页登录是需要“服务号”才可以哦,所以必须到官方申请 一开始你需要进入微信公 ...

  6. PHP读取超大的excel文件数据的方案

    场景和痛点 说明 今天因为一个老同学找我,说自己公司的物流业务都是现在用excel处理,按月因为数据量大,一个excel差不多有百万数据,文件有接近100M,打开和搜索就相当的慢 联想到场景:要导入数 ...

  7. [安装] mac安装PHP7经历

    背景 前几天在mac上跑workrman,由于workerman需要开启多个进程,多进程需要pcntl扩展的支持,我之前那个brew安装的php71没有这个扩展,就直接卸载了php71,然后想下载源码 ...

  8. node assert.equal()

    浅测试,使用等于比较运算符(==)来比较 actual 和 expected 参数. const assert = require('assert'); assert.equal(1, 1); // ...

  9. stark组件之显示页面内容搭建(六)

    之前主要介绍了前端页面list_fiter功能的显示,但是list_display功能的展示并没有过多介绍,这里介绍一下是如何实现的. 可以看到凡是蓝线圈起来的都是通过字段名反射一个个取出来的,红线的 ...

  10. STM32F407 GPIO原理 个人笔记

    datasheet(STM32F407ZGT6.pdf)中,IO structure 为FT,表示容忍5V电压 后面的uart1_TX之类,表示端口复用 共有A~G7组IO口, 每组16个IO口:0~ ...