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. vue的slot

    1.明确一点:分发内容是在父作用域内编译: 2.slot作为备用内容的条件:宿主元素为空且父元素没有要分发的内容. 3.具名slot:<slot name="XXX"> ...

  2. 数独c++

    #include <bits/stdc++.h> using namespace std; const int maxn = 10; bool maps[maxn][maxn], row[ ...

  3. Java Number & Math类

    java Number类 Java的内置数据类型有byte.int.long.double等. Java 语言为每一个内置数据类型提供了对应的包装类. int对应的包装类为Integer long对应 ...

  4. 基于腾讯云搭建squid代理服务器

    本文主要介绍下在腾讯云上搭建squid代理服务器,用于访问国外网站或者为爬虫提供代理ip,以及简单介绍下如何基于腾讯云提供的SDK,批量开启或者销毁代理服务器实例. Squid是一个高性能的代理缓存服 ...

  5. 25-12 空值处理(null值)

    --------------------空值处理--------------------- select * from TblStudent --查询所有年龄是null的同学学习信息 --null值无 ...

  6. 关于如何查看论文是否被SCI或者EI收录

    最好的方法,在高校图书馆网站上进行查询. 另外还有就是去对应网站查询: SCI:https://apps.webofknowledge.com/UA_GeneralSearch_input.do?pr ...

  7. css 3 背景图片为渐变色(渐变色背景图片) 学习笔记

    6年不研究CSS发现很多现功能都没有用过,例如渐变色,弹性盒子等,年前做过一个简单的管理系统,由于本人美工不好,设计不出好看的背景图片,偶然百度到背景图片可以使用渐变色(感觉发现了新大陆).以后的项目 ...

  8. 50个SQL语句(MySQL版) 问题一

    --------------------------表结构-------------------------- student(StuId,StuName,StuAge,StuSex) 学生表 tea ...

  9. remote desktop能实现什么?远程桌面管理的意义是什么?

    随着互联网时代的发展,向人请教来说,视频教学已经不算便捷了,而远程桌面就发挥了重要作用.它意味着您可以从家里连接到工作计算机,并访问所有应用程序.文件和网络资源,好像正坐在工作计算机前面.您可以让程序 ...

  10. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(一)

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...