4-react 组件之间传值。
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 组件之间传值。的更多相关文章
- react 组件之间传值
谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
- react组件之间传值方式
1.父向子(通过props传值) 2.父向更深层的子(通过context传值) 3.子向父(通过回调函数传值:在父组件中创建一个函数来接收子组件传过来的参数值,通过父组件将这个函数做为子组件的属性传递 ...
- vue组件之间传值方式解析
vue组件之间传值方式解析一.父组件传到子组件 1.父组件parent代码如下: <template> <div class="parent"> <h ...
- 从0开始探究vue-组件化-组件之间传值
理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组 ...
- React 组件之间通信 All in One
React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...
- React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)
本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...
- React学习——通过模态框中的表单,学习父子组件之间传值
import { Button, Modal, Form, Input, Radio } from 'antd'; const CollectionCreateForm = Form.create({ ...
- React之父子组件之间传值
1.新增知识点 /** React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. 父子组件:组件的相互调用中,我们把调 ...
- React 组件间传值
壹 .了解React传值的数据 一. 创建组件的方法 一 . 1 通过function声明的组件特点是: 1)function创建的组件是没有state属性,而state属性决定它是不是有生命周期 ...
随机推荐
- 感觉shopex现在的升级方式太慢了
我是说产品的更新,484,485是一个经典的版本,那时候免费,shopex 系统市场占用率很高.但是485以后呢,只有小版本的更新,fxw ,ekd 都是改进版本吧,没用特别大幅度的更新.5年前,10 ...
- Oracle 大数据查询优化方法
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- Postgres的索引01
一.PG 9.3有以下索引类型 1.b-tree 1.1支持前导模糊查询,如xxx%或者^'xxx' 1.2忽略大小写字符前导模糊查询,如ILIKE 'XXX%'或者~*'^xxx' 1.3支持常见的 ...
- 树形DP 2415HDU
Bribing FIPA Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- SQL——SELECT、UPDATE、DELETE和INSERT INTO
SQL是一种ANSI的标准计算机语言.ANSI:美国国家标准化组织.除SQL标准外,大部分SQL数据库都拥有私有的扩展.SQL对大小写不敏感.某些数据库系统要求在SQL命令末端使用分号,这样可以执行一 ...
- .Net Core实现区块链初探
区块链这么火,咱也跟个风. 一.前言 最近,银行总行关于数字货币即将推出的消息频传,把BTC也带得来了一波反弹. 借着这个风,我们也研究一下区块链. 通常大家说到区块链,实际包括两部分概念: ...
- SpringMVC中使用@Valid和BindingResult进行参数验证
我们知道,后端Controller层一般是第一层被调用,它用来接收参数以及转发,那么参数的校验也就在这一层,例如非空和格式校验等等. 手动验证 public String validPhone(Str ...
- pyqt5-多线程初步
多线程是实现并发的一个重要手段.在GUI编程中,经常需要将耗费时间较多的任务分离出来成为一个线程,避免对主线程造成影响(造成界面无响应). 在Qt中,最简单的多线程主要通过继承QThread类实现,重 ...
- 【深度学习】PyTorch之Squeeze()和Unsqueeze()
1. unsqueeze() 该函数用来增加某个维度.在PyTorch中维度是从0开始的. import torch a = torch.arange(0, 9) print(a) 结果: tenso ...
- [Office#PPT]0001.实例剖析-如何制作一个牛B的融资PPT
一些好公司明明在模式上富有创新性,但却在 pitch 时很保守,而且他们又不缺设计和开发能力.如何设计你的融资演讲稿才会吸引投资人对你投资?投资人 Daniel Eckler给大家贡献了下面这篇技术贴 ...