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.掌握子父传值的方法 ...
随机推荐
- sql查询语句如何执行
MySQL 可以分为 Server 层和存储引擎层两部分. 查询缓存: Mysql拿到一个查询请求之后,会先查询缓存,之前执行过的语句及结果可能会以Key-Value的形式被存在缓存中,Key是查询语 ...
- new Date().getTime()和System.currentTimeMillis()的区别
在Java中,new Date().getTime()和System.currentTimeMillis()都是用来获取当前时间的,并可以用DateFormat转成对应的时间格式,代码如下. impo ...
- 面试-java反射
问题:简述Java中的反射使用 答: 1.作用: 可以通过配置文件来动态配置和加载类,以实现软件工程理论里所提及的类与类,模块与模块之间的解耦.反射最经典的应用是spring框架. 2. 定义 反射简 ...
- context使用
1. 概述 go语言中goroutine之间的关联关系,缺乏维护,在erlang中有专门的机制来保障新开协程的生命周期,在go语言中,只能通过channel + select来实现,但不够直观,很绕. ...
- 2018年-2019年第二学期第七周C#学习个人总结
在本周我又学习了,第五章面向对象高级中的5.5异常和5.6命名空间和程序集.在5.5异常中我知道了异常层次结构:所有的异常类都继承自Exception类.由于发生了异常程序立即终止无法再继续向下执行. ...
- linux清理缓存的命令
查看缓存的命令 free -m 清理缓存的命令 echo 1 > /proc/sys/vm/drop_caches echo 2 > /proc/sys/vm/drop_caches e ...
- Javascript的防抖和节流、VUE的防抖和节流
js原生 函数防抖:将几次操作合并为一此操作进行.原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置.这样一来,只有最后一次操作能 ...
- WPF DataGrid 绑定行双击行命令
WPF DataGrid 绑定行双击行命令 <DataGrid ...> <DataGrid.InputBindings> <MouseBinding MouseActi ...
- 【搬运工】修改mysql数据库的时区
转载:https://blog.csdn.net/huangyuehong914/article/details/81742039 --------------------- ------------ ...
- python cookbook 小结
最近一直在看python cookbook.这本书主要讲的是python 语言的一些编程素材.正如它的名字一样,烹饪书.就好像再讲如何处理食材(各种类型的数据),然后再煮菜(算法).打个比方,煮菜随便 ...