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中的传参方式的更多相关文章

  1. Web API中的传参方式

    在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete ...

  2. axios中post传参方式

    最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414 ...

  3. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  4. React中路由传参及接收参数的方式

    注意:  路由表改变后要重启服务      方式 一:          通过params         1.路由表中                     <Route path=' /s ...

  5. java 中 Integer 传参方式的问题

    Java本身都是值传递式的调用,对于对象传递的是地址值.给地址值重新赋值等于重新指向,不会影响外层. 而且这里Integer对象也有特殊性.其实现上可能类似 class Integer{ final ...

  6. mock和axios常见的传参方式

    第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两 ...

  7. Vue-cli中axios传参的方式以及后端取的方式

    0917自我总结 Vue-cli中axios传参的方式以及后端取的方式 一.传参 params是添加到url的请求字符串中的,用于get请求. data是添加到请求体(body)中的, 用于post请 ...

  8. awk中传参方式

    结合编辑数据文件的shell脚本学习awk传参方式,该脚本功能: a.取VIDEOUSR_11082017_0102_ONLINE_STASTIC.dat文件中第87个字段的低8位: b.将每行数据的 ...

  9. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

随机推荐

  1. python习题一

    1.26个字母大小写成对打印,例如:Aa,Bb...... 方法1: for i in range(26): print(chr(65+i)+chr(97+i)) 方法2: for i in rang ...

  2. 使用 lsyncd 同步文件

    https://unix.stackexchange.com/questions/307046/real-time-file-synchronization https://github.com/ax ...

  3. unix socket服务器

    只能处理单个消息,一发一收. int loop(void) {   struct sockaddr_un client_addr;  int server_socket, client_socket; ...

  4. GoldenGate for bigdata 12.3.2.1版本新特性

    在Oracle Tenical Network(OTN)上已经可以下载到最新的ogg4bd版本,地址如下:http://www.oracle.com/technetwork/middleware/go ...

  5. lnmp一键安装包安装失败,或者安装下载缓慢的解决办法

    使用阿里云内网安装模块 阿里云外网: ftp://soft6.vpser.net/ 阿里云云内网:ftp://10.163.196.147 修改lnmp.conf 文件 目前可用的国内LNMP ful ...

  6. Redis查漏补缺:最易错过的技术要点大扫盲

    考虑到绝大部分写业务的程序员在实际开发中使用Redis时,只会Setvalue和Getvalue两个操作,对Redis整体缺乏一个认知.又恰逢笔者有同事下周要去培训Redis,所以笔者斗胆以Redis ...

  7. java中‘\'和'/'的区别

    斜杠“/”表示地址路径的下一级目录:反斜杠“\”表示转义字符,例如:要做制表,可以输入:\t:做换行:\n等.如果要输出反斜杠“\”也需要用转义字符:“\\”    在java中后台给前台传的时候如果 ...

  8. Native App自动化测试及Appium框架介绍

    一  自动化工具简介 1 Appium : 开源,跨平台的自动化测试工具,用于测试Native(原生)和Hybrid(混合)应用,支持IOS/Android/FirefoxOS 平台. 2  环境 : ...

  9. 记录近期面试题,面试总结 (从css - vue 全面面试题)

    记录近期换工作时遇到的面试题和面试题答案 css 部分 盒模型 问题:说一下 css 的盒模型 盒模型分为标准模型和怪异盒模型(IE 盒模型) 标准盒模型:盒模型的宽高只是内容(content)的宽高 ...

  10. HTML5外包注意事项-开发HTML5游戏的九大坑与解决方法剖析

    随着移动社区兴起,势必带动HTML5的革命.未来一两年内,HTML5移动游戏必将呈现大爆发趋势. 以下是整理的HTML5游戏研发.市场趋势以及渠道布局和技术解决方案的内容.希望大家能从本文中找到对HT ...