1、传值:
都是使用props和state结合得方式进行组件之间得传值
再react中传值得话是父子组件之间得传值,一般会把父组件中得state值通过props传给子组件,再子组件中使用props进行接收
实现方法:
把父组件中得text状态通过props传给子组件,然后再子组件中使用props进行接收
react是一个单向数据流,换句话来说数据得流向是单向得,使用props只能让父组件给子组件传值,但是不能让子组件给父组件进行传值,只要是父组件中得状态值发生变化那么子组件就会重新渲染重新获取props属性值
父组件改变状态值执行顺序:
父组件得state改变之后,会引起父组件得重新渲染,再渲染过程中,那么子组件得text属性就会重新被赋值,子组件接收到父组件传过来得值得变化,那么就会引起重新渲染
再这种情况下形成从上而下得数据流,react是单向得数据流,“向”方向是向下得

2、把父组件得input中输入得内容作为传给子组件得值
再传值得时候,就只能传一个值吗?相传多少个就能传多少个

3、父组件给孙子组件传值
实现原理:借助中间组件Son组件,先让父组件给Son组件传值,然后Son组件再给grandSon传值

4、子组件给父组件传值:回调函数得方式进行传值得
原理:
再父组件中写一个函数(有参函数,参数得作用:为了接收子组件传过来值)  这个函数不是再父组件中调用得实在子组件中进行调用

5、使用回调函数进行父子组件传值:子组件给父组件传值
原理:
再父组件中设置一个有参函数,通过传值的方式把这个函数传给子组件,然后再子组件调用这个函数的同时,把需要的参数作为子组件传给父组件的值,然后这个参数是再父组件中进行接收和设置的
6、refs属性
refs是react中提供给我们访问DOM元素或者某个组件实例的一个属性
可以通过这个属性获取到当前需要获取的某一个组件实例或者是DOM元素
一般后边会跟一个回调函数,它会把我们需要的值返回到这个回调函数的第一个参数中

7、通过ref属性访问DOM元素
实现效果:单机登录按钮,把DOM中的input里边的value获取出来进行打印
想要获取哪个DOM节点或组件实例就给谁加上ref属性
只要是能找到当前的DOM元素或者是当前的组件实例,那么就可以及逆行任何操作,包括当前这个组件实例中的任意的一个状态和任意的一个方法都可以进行使用

8、获取ref属性的三种方法:
使用回调函数的方式,把返回值作为第一个参数(这个参数获取的就是当前的DOM或实例)
<Son ref={(son)=>this.son=son}/>
第二种:直接写使用refs进行获取:
<Son ref="son"/>
this.refs.son或this.refs['son']

9、context:
如果父组件给子组件传值得话使用得是props进行传值得,一旦组件得层级嵌套很深得话,使用props进行传值得这种方式就不合适了。react提供了一种context得传递数据得方式
context原理:context就相当于是一个全局变量,我们只需要将需要传递得数据放在这个变量中,不管组件树多么负责,嵌套有多深,子组件都可以从context中获取需要得值

10、实现context
父组件:
使用getChildContext方法来设置context,返回得就是一个context对象
使用childContextTypes来验证getChildContext返回得对象类型
子组件:
使用contextTypes来严重需要验证得context类型
直接通过this.context来获取想要获取得context的值即可

11、总结context传值的方式

一个组件通过getChildContext方法返回一个context对象,这个对象就是子组件中需要获取的context对象,提供context组件的必须有childContextTypes作为对context的验证和声明
如果一个组件中设置了context,那么它的子组件可以随时获取context中设置的数据,这个context就相当于是一个全局变量。任意深度的子组件都可以获取到,但是都必须要通过ContextType啥的声明才悻悻,然后使用this.context进行获取

12、context好处:
context打破了常规的组件之间传值通过props的方式,极大的增加了组件之间的耦合性,并且就像使用全局变量一样,context里边的数据能被随意修改
再不适用第三方管理状态的话,再多个组件之间使用context能给我们带来很大的方便

总结:

组件之间的传值:
方法一:父组件给子组件传值:使用的是props
方法二:子组件给父组件传值:回调函数的方式
方法三:子组件给父组件传值:ref属性直接找到子组件获取子组件中的数据
方法四:父组件给更深层次的子组件传值:context
方法五:兄弟组件传值:son1先传值给父组件,然后父组件再传值给son2
方法六:兄弟组件传值:son1给父组件,父组件通过context传值给son2子组件

4-react 组件之间传值。的更多相关文章

  1. react 组件之间传值

    谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...

  2. react组件之间传值方式

    1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...

  3. vue组件之间传值方式解析

    vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...

  4. 从0开始探究vue-组件化-组件之间传值

    理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...

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

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

  6. React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)

    本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...

  7. React学习——通过模态框中的表单,学习父子组件之间传值

    import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...

  8. React之父子组件之间传值

    1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...

  9. React 组件间传值

    壹  .了解React传值的数据 一. 创建组件的方法 一 . 1  通过function声明的组件特点是: 1)function创建的组件是没有state属性,而state属性决定它是不是有生命周期 ...

随机推荐

  1. Django组件content-type使用方法详解

    前言 参考博客:https://www.zhangshengrong.com/p/zD1yQJwp1r/ 一个表和多个表进行关联,但具体随着业务的加深,表不断的增加,关联的数量不断的增加,怎么通过一开 ...

  2. MyBatis In的使用

    http://blog.csdn.net/unei66/article/details/17792503 MyBatis In的使用 标签: mybatisin 2014-01-03 16:23 74 ...

  3. Windows系统下Git的下载和配置

    简介:Git是一款免费.开源的分布式版本控制系统,可记录文件每次改动,便于多人协作编辑. 下载:git-for-windows下载地址https://git-for-windows.github.io ...

  4. go语言依赖注入实现

    最近做项目中,生成对象还是使用比较原始的New和简单工厂的方式,使用过程中感觉不太爽快(依赖紧密,有点改动就比较麻烦),还是比较喜欢使用依赖注入的方式. 然后网上没有找到比较好用的依赖注入包,就自己动 ...

  5. JSP+SSM+Mysql实现的图书馆预约占座管理系统

    项目简介 项目来源于:https://gitee.com/gepanjiang/LibrarySeats 因原gitee仓库无数据库文件且存在水印,经过本人修改,现将该仓库重新上传至个人gitee仓库 ...

  6. 【HTTP】HTTP报文&状态码

    HTTP报文中的HTTP信息 一.编码提升传输速率 编码的好处:有效处理大量的访问请求 编码的弊端:会消耗更多的CPU资源 报文主体&实体主体 报文:HTTP通信的基本单元,8位组字节流组成, ...

  7. JUC整理笔记三之测试工具jcstress

    并发测试工具Jcstress使用教程 Jcstress 全称 Java Concurrency Stress,是一种并发压力测试工具,可以帮助研究JVM.java类库和硬件中并发的正确性. Wiki地 ...

  8. Android启动过程_大致流程

    Android大致启动过程如图(基于O版本  使用draw.io画的). 注:这是通过查询结合自己了解的,还有不少不明确的,后续有进展完善,欢迎指正. 说明:绿色是主要几个的阶段.其他围绕这几个阶段的 ...

  9. [Objective-C] 009_Foundation框架之NSDictionary与NSMutableDictionary

    在Cocoa Foundation中NSDictionary和NSMutableDictionary 用于对象有序集合,NSDictionary和NSMutableDictionary 与 NSArr ...

  10. java第十三周课后作业 0529

    1.把多个企鹅的信息添加到集合中查看企鹅的数量及所有企鹅的信息删除集合中部分企鹅的元素判断集合中是否包含指定企鹅 package homework; import java.util.ArrayLis ...