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. php的 mysqlnd驱动

    这篇文章写的好 http://blog.linuxeye.com/395.html 传统编译php的时候需要指定mysql 的参数 --with-mysql=/usr/local/mysql \ -- ...

  2. python之感知器-从零开始学深度学习

    感知器-从零开始学深度学习 未来将是人工智能和大数据的时代,是各行各业使用人工智能在云上处理大数据的时代,深度学习将是新时代的一大利器,在此我将从零开始记录深度学习的学习历程. 我希望在学习过程中做到 ...

  3. 实现es6中的set和map

    转载自: https://www.cnblogs.com/hui-fly/p/9459152.html https://blog.csdn.net/roamingcode/article/detail ...

  4. python3.x 基础三:字符集问题

    总结了一张表,更详细信息百度百科: 序号 年份 编码 标准协会 特点 二进制长度 字符长度 表现 1 1967 ASCII 美国国家标准学会(American National Standard In ...

  5. JavaScript事件坐标区别(offset,client,page)

    学习笔记. 1. offset:其定位原点是当前元素左上角 2. client:其定位原点是当前窗口左上角 3. page:其定位原点是当前页面左上角 下面来验证一下. 先上代码: <!doct ...

  6. hdu3861他的子问题是poj2762二分匹配+Tarjan+有向图拆点 其实就是求DAG的最小覆盖点

    The King’s Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  7. 3、JSP中的Cookie 用于存储 web 页面的用户信息。

    cookie 在平时生活中的运用 存储用户在网页上的登陆信息,包括账号和密码. 有的网站,登陆的时候,会出现一个选项,问你是否要一周内或者一个月内保持登陆状态.如果你选了,那么一周之内,都不需要再输入 ...

  8. python常见面试题讲解(二)计算字符个数

    题目描述 写出一个程序,接受一个由字母和数字组成的字符串,和一个字符,然后输出输入字符串中含有该字符的个数.不区分大小写. 输入描述: 第一行输入一个有字母和数字以及空格组成的字符串,第二行输入一个字 ...

  9. Nginx 运维(安装与使用)

    Nginx 运维(安装与使用) 普通安装 Windows安装 (1)进入官方下载地址,选择合适版本(nginx/Windows-xxx). (2)解压到本地 (3)启动 下面以 C 盘根目录为例说明下 ...

  10. "锁定文件失败 打不开磁盘或它所依赖的某个快照磁盘。模块启动失败。未能启动虚拟机"--解决方法

    今天正在使用kali的时候,电脑突然死机了..强制重启,在进入虚拟机发现报错: "锁定文件失败 打不开磁盘或它所依赖的某个快照磁盘.模块启动失败.未能启动虚拟机." 1.问题起因 ...