react中的传参方式
react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种:
1,在挂载的地方给组件传参
ReactDOM.rander(<a name='a' age={16}/>,app) 在渲染的时候,直接给挂载的组件传参。
2,父子传参
父子传参可以用props和ref两种方式,1,props方式传参,父组件通过改变自己的参数并且通过props将状态传递给子组件,并在子组件中显示。2,通过ref传参,这种方式是通过子组件自己的方法改变自己的状态后,父组件通过触发子组件的方法更改参数。
3,子父传参
子组件通过触发父组件的方法来改变父组件的状态,
4,兄弟传参
兄弟传参有两种,一种是通过状态提升,通过改变公有组件的状态进而改变子组件的状态,另一种是通过ref传参的方式,改变原有的状态。
5,远亲间的传参
通过redux协助传参,一般会适用与项目间的交互较多时使用,并没有什么互动时若使用redux反而会增加项目的复杂度,当不知道要不要使用redux的时候就不要使用。
关于这几种方法的具体使用方法,会在下一篇具体传参方式中给出。
react中的传参方式的更多相关文章
- Web API中的传参方式
在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete ...
- axios中post传参方式
最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414 ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- React中路由传参及接收参数的方式
注意: 路由表改变后要重启服务 方式 一: 通过params 1.路由表中 <Route path=' /s ...
- java 中 Integer 传参方式的问题
Java本身都是值传递式的调用,对于对象传递的是地址值.给地址值重新赋值等于重新指向,不会影响外层. 而且这里Integer对象也有特殊性.其实现上可能类似 class Integer{ final ...
- mock和axios常见的传参方式
第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两 ...
- Vue-cli中axios传参的方式以及后端取的方式
0917自我总结 Vue-cli中axios传参的方式以及后端取的方式 一.传参 params是添加到url的请求字符串中的,用于get请求. data是添加到请求体(body)中的, 用于post请 ...
- awk中传参方式
结合编辑数据文件的shell脚本学习awk传参方式,该脚本功能: a.取VIDEOUSR_11082017_0102_ONLINE_STASTIC.dat文件中第87个字段的低8位: b.将每行数据的 ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
随机推荐
- clean exit - waiting for changes before restart
在使用nodemon的时候,针对于同一个文件一次使用还好,当多次使用的时候就会出现这样的情况: 解决办法: nodemon clean exit 原因: 可能是因为缓存造成的:
- Java线程基础(一)
说在前面,经过一段学习过后,自己发觉线程在Java中占有举足轻重的地位,总觉得如此复杂的线程知识点一定要好好理清才好消化,因而有了这篇文章. 但因鄙人资历尚浅,如有遗漏错误之处还请广大网友不吝赐教. ...
- SKCTF Writeup
签到题 请打开微信关注,发送give me flag,即可获得. Encode 1.ACSCLL 首先看到这类题,我们肯定是要使用ASCLL的(这么明显的提示大家肯定一眼就能看出来),我们可以对照As ...
- Linux 设置系统时间和时区2.Ubuntu
查看当前时间状态 timedatectl status 设置时区 sudo dpkg-reconfigure tzdata Asia shanghai
- 解决Win10 PowerShell无法激活Anaconda环境的问题
最近在使用Anaconda的过程中,发现在Win10的PowerShell在使用conda activate 环境名激活环境时无效,而CMD则可以.这里前提必须将Anaconda 写入环境变量.否则在 ...
- Python游戏编程入门3
用户输入:Bomb Catcher游戏本章介绍使用键盘和鼠标获得用户输入.包括如下主题:学习pygame事件学习实时循环学习键盘和鼠标事件学习轮询键盘和鼠标的状态编写Bomb Catcher游戏 1本 ...
- PowerShell自定义函数定义及调用
PowerShell是一种命令集,也有自己的语法定义及函数.本文主要介绍如何自定义powershell函数及如何调用,当初在写PowerShell自定义函数的时候查阅了很多资料都没找到如何调用自定义函 ...
- SQLServer 2008 R2查看字段约束
SQLServer 2008 R2 删除字段前检查字段的约束: select a.name,b.name as cname from syscolumns a left join sysobjects ...
- docker笔记(3) ------Django项目的docker部署
2019-01-12 14:23:18 django容器连接到mysql_server容器分析:原myblog项目使用sqlit3数据库,使用mysql容器前需要在django中加入pymysql ...
- Socket编程 之使用fsockopen()函数
fsockopen函数:初始化一个套接字连接到指定主机(hostname) get方式: client.php <?php //创建连接 $fp=fsockopen('localhost',80 ...