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. spark机器学习从0到1支持向量机SVM(五)

        分类 分类旨在将项目分为不同类别. 最常见的分类类型是二元分类,其中有两类,通常分别为正数和负数. 如果有两个以上的类别,则称为多类分类. spark.mllib支持两种线性分类方法:线性支持 ...

  2. ReactNavigation中如何实现页面跳转

    一.ReactNavigation中如何实现页面跳转 因为每个屏幕组件(具有路由地址的组件)都是由App根组件自动创建并挂载的,App组件 在创建屏幕组件时,会自动传递进来一个props:   nav ...

  3. mysql运维入门4:索引、慢查询、优化

    MySQL索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都是以B-树的形式保存 如果没有索引,执行查询时,MySQL必须从第一个记录开始整表扫描,知道查询到符合要求的记录,记录越大,花费时 ...

  4. 最全面的Android Studio使用教程

    http://www.admin10000.com/document/5496.html

  5. slf4j、log4j、 logback关系详解和相关用法

    slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着“拿来主义”的态度,复制粘贴下配置文件就开始编码了, ...

  6. Java并发:线程安全分析

    java中的线程安全是什么: 就是线程同步的意思,就是当一个程序对一个线程安全的方法或者语句进行访问的时候,其他的不能再对他进行操作了,必须等到这次访问结束以后才能对这个线程安全的方法进行访问 什么叫 ...

  7. Git链接http转ssh

    git remote set-url origin git@gitserver:USERNAME/PROJECT.git

  8. Istio VirtualService 虚拟服务

    概念及示例 VirtualService 描述了一个或多个用户可寻址目标到网格内实际工作负载之间的映射 . 虚拟服务让您配置如何在服务网格内将请求路由到服务,这基于 Istio 和平台提供的基本的连通 ...

  9. 【JAVA习题三】求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字。例如2+22+222+2222+22222(此时共有5个数相加

    import java.util.Scanner; public class a加aa加aaa { public static void main(String[] args) { // TODO A ...

  10. mac下安装rabbitmq和php+rabbitq

    一.首先使用brew安装rabbitmq brew install rabbitmq 安装完成,终端会出现如下内容,如图: 启动RabbitMQ 前台运行rabbitmq-server 后台运行bre ...