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. pdf 使用模板下载

    //根据模板下载模板 /** * * 政策5-8条的创建的pdf的模板 */public String createPdfCashTemplate(PdfCashParam pdfCashParam) ...

  2. ascii - 在八进制,十进制,十六进制中的 ASCII 字符集编码

    描述 ASCII 是美国对于信息交换的标准代码,它是7位码,许多8位码(比如 ISO 8859-1, Linux 的默认字符集)容纳 ASCII 作为它们的下半部分.对应的国际 ASSII 是 ISO ...

  3. Django 外键ForeignKey中的on_delete

    当你在Django中删除了一个有着外键关联的数据时,比如一个作者和他名下的所有的书的信息,书的外键是作者(一个作者可有好多本书),当你把作者的信息从数据库中删除时,Django提供了一下几个参数来对作 ...

  4. 解决android的键盘弹出时,html页面的高度被压缩

    如果元素的高度是用100%表示,那么,安卓的键盘弹出时,高度会发生变化,导致布局混乱,所以最好给高度设置像素高度 $("html,body").height(window.inne ...

  5. JavaSE-06 二维数组

    学习要点 二维数组的定义 二维数组内存数据结构 不规则二维数组 二维数组的定义 语法格式 格式一 数据类型[][] 数组名 = new 数据类型[m][n]; m:表示这个二维数组有多少个一维数组. ...

  6. 用宿主机创建一个容器bind命令的应用

    先创建一个网页目录 [root@docker ~]# mkdir /app/wwwroot -p 用bind运行,源目录为刚才创建的 [root@docker ~]# docker run -itd ...

  7. 零基础入门学习Python(24)--递归:汉诺塔

    知识点 这节课主要讲解用递归的方法,实现汉诺塔的解答 对于游戏的玩法,我们可以简单分解为三个步骤: 1) 将前63个盘子从X移动到Y上. 2) 将最底下的第64个盘子从X移动到Z上. 3) 将Y上的6 ...

  8. C++ 类 直接定义对象与new对象的区别

    new创建类对象与直接定义的区别 new创建对象的特点 new创建类对象需要指针接收,一处初始化,多处使用 new创建类对象使用完需delete销毁 new创建对象直接使用堆空间,而局部不用new定义 ...

  9. python面向对象编程设计与开发

    一.什么是面向对象的程序设计 1.何为数据结构? 数据结构是指相互之间存在一种或多种特定关系的数据元素的集合,如列表.字典. 2.何为编程? 编程是指程序员用特定的语法+数据结构+算法,组成的代码,告 ...

  10. *lucene索引_创建_域选项

    [索引建立步骤] [创建Directory] [创建writer] [创建文档并添加索引] 文档和域的概念很重要 文档相当于表中的每一条记录,域相当于表中的每一个字段. [查询索引的基本信息] 使用I ...