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.掌握子父传值的方法 ...
随机推荐
- 利用 html js判断 客户端是否安装了某个app 安装了就打开 否则跳转到gp
三种方式 方式一:简单的进行打开app,延时操作若未打开直接跳gp function isInstalled(){ var urlFrag = 'somepars'; var the_href = ' ...
- Xshell连接Linux慢问题解决办法
由于各种原因,经常更换网络环境,然后发现,每次更换网络环境后,xshell连接虚拟机的rhel或者CentOS都几乎是龟速.... 今天专门查了一下解决方案: 原来是ssh的服务端在连接时会自动检测d ...
- nodejs基础快速上手
node 快速了解 hello node.js console.log("hello Node.js"); let http = require("http") ...
- oracle网络服务之beq协议和SDU优化(性能提升可达30%)
oracle网络服务之beq协议和SDU优化(性能提升可达30%) 12.3.1 BEQ协议 如果Oracle数据库服务端和客户端在同一台机器上,可以使用BEQ连接,BEQ连接采用进程间直接通信,不 ...
- Windows下ActiveMQ的下载和启动
1.打开浏览器,访问网址activemq.apache.org,如下图所示: 2.下载最新的版本,当前最新版本为5.15.5,根据ActiveMQ需要安装的操作系统选择性下载对应的版本,这里我选择Wi ...
- FL Studio中音频ASIO4ALL的设置
上期我们讲解了FL Studio中音频的相关设置,今天我们来进一步讲解音频设置中的ASIO4ALL的设置,FL Studio安装包括FL Studio ASIO和第三方ASIO驱动程序ASIO4ALL ...
- vue v-if:"TypeError: Cannot read property 'length' of undefined"
在使用v-if判断一个数组大小为0时,会出现 length 是undefined的错误:[Vue warn]: Error in render: "TypeError: Cannot rea ...
- SQLServer 2008 R2查看字段约束
SQLServer 2008 R2 删除字段前检查字段的约束: select a.name,b.name as cname from syscolumns a left join sysobjects ...
- laravel框架——验证码(第一种方法)
一.在框架根目录下下载图形验证码的组件 composer require gregwar/captcha=1.* 二.控制器代码 use Gregwar\Captcha\CaptchaBuilder; ...
- NRF52832与W25Q80通信
1 NRF52832SPI主机的功能描述 nRF52832SPIM的主要特征 3个SPI实例 支持SPI的模式0到模式3 支持DMA Individual selection of IO pin fo ...