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.掌握子父传值的方法 ...
随机推荐
- python习题一
1.26个字母大小写成对打印,例如:Aa,Bb...... 方法1: for i in range(26): print(chr(65+i)+chr(97+i)) 方法2: for i in rang ...
- 使用 lsyncd 同步文件
https://unix.stackexchange.com/questions/307046/real-time-file-synchronization https://github.com/ax ...
- unix socket服务器
只能处理单个消息,一发一收. int loop(void) { struct sockaddr_un client_addr; int server_socket, client_socket; ...
- GoldenGate for bigdata 12.3.2.1版本新特性
在Oracle Tenical Network(OTN)上已经可以下载到最新的ogg4bd版本,地址如下:http://www.oracle.com/technetwork/middleware/go ...
- lnmp一键安装包安装失败,或者安装下载缓慢的解决办法
使用阿里云内网安装模块 阿里云外网: ftp://soft6.vpser.net/ 阿里云云内网:ftp://10.163.196.147 修改lnmp.conf 文件 目前可用的国内LNMP ful ...
- Redis查漏补缺:最易错过的技术要点大扫盲
考虑到绝大部分写业务的程序员在实际开发中使用Redis时,只会Setvalue和Getvalue两个操作,对Redis整体缺乏一个认知.又恰逢笔者有同事下周要去培训Redis,所以笔者斗胆以Redis ...
- java中‘\'和'/'的区别
斜杠“/”表示地址路径的下一级目录:反斜杠“\”表示转义字符,例如:要做制表,可以输入:\t:做换行:\n等.如果要输出反斜杠“\”也需要用转义字符:“\\” 在java中后台给前台传的时候如果 ...
- Native App自动化测试及Appium框架介绍
一 自动化工具简介 1 Appium : 开源,跨平台的自动化测试工具,用于测试Native(原生)和Hybrid(混合)应用,支持IOS/Android/FirefoxOS 平台. 2 环境 : ...
- 记录近期面试题,面试总结 (从css - vue 全面面试题)
记录近期换工作时遇到的面试题和面试题答案 css 部分 盒模型 问题:说一下 css 的盒模型 盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高 ...
- HTML5外包注意事项-开发HTML5游戏的九大坑与解决方法剖析
随着移动社区兴起,势必带动HTML5的革命.未来一两年内,HTML5移动游戏必将呈现大爆发趋势. 以下是整理的HTML5游戏研发.市场趋势以及渠道布局和技术解决方案的内容.希望大家能从本文中找到对HT ...