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. org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'catchFromPBomService': Cannot create inner bean '(inner bean)#302efb82' of type [com.thinkgem.jeesite.modules.fd

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'catchFromPBo ...

  2. 利用 postMessage 进行数据传递 (iframe 及web worker)及问题

    一 postMessage应用于主页面和iframe之间进行数据的传递 1  子iframe页面向主页面进行数据传递: // 多个子iframe需要将自己的计数统计到主页面进行数据上报 window. ...

  3. rabbitmq作为mqtt服务器实现websocket消息推送给浏览器

    rabbitmq的RabbitMQ Web MQTT插件可以用来支持将rabbitmq作为MQTT协议的服务器,而websocket支持mqtt协议通信实现消息推送.因为我们目前使用rabbitmq, ...

  4. JSOI2020备考知识点复习

    我太菜了qaq,我好爱咕咕咕啊 在NOIP2018爆炸后,我只能指望着在JSOI2019JSOI2020上咸鱼翻身(flag*1) 所以,我要开始复习学习(flag*2) 此博客文会不定时更新qaq( ...

  5. 'OFFSET' 附近有语法错误。 在 FETCH 语句中选项 NEXT 的用法无效。

    在使用asp.net core的时候,采用take().skip()分页的时候报如下错误: SqlException: 'OFFSET' 附近有语法错误. 在 FETCH 语句中选项 NEXT 的用法 ...

  6. 为基于OpenCV的图像处理程序编写界面—关于QT\MFC\CSharp的选择以及GOCW的介绍

            基于OpenCV编写图像处理项目,除了算法以外,比较重要一个问题就是界面设计问题.对于c++语系的程序员来说,一般来说有QT/MFC两种考虑.QT的确功能强大,特别是QML编写andr ...

  7. nodejs中使用crypto-js先HmacSha1加密后转Base64

    1. 先HmacSha1后Base64 var HmacSha1 = require('crypto-js/hmac-sha1') ;var Base64 = require('crypto-js/e ...

  8. VirtualBox中安装CentOS 7_Linux

    准备条件 在自己真实机上已经安装了VirtualBox虚拟机,具体安装方法可以参考Linux公社的文章. 下载CentOS-7的镜像 1. 在虚拟机中创建虚拟电脑 如图点击新建按钮,开始新建虚拟机电脑 ...

  9. Python3.6 运行提示 ImportError: cannot import name 'CONFIG_FILE'

    如下代码: import os from utils.file_reader import YamlReader BASE_PATH = os.path.split(os.path.dirname(o ...

  10. 整合SSH框架实现简单登录

    SSH整合的大体结构:我们将Struts2和hibernate交给spring来管理 创建好web项目之后,首先当然是先引入需要的pom节点,需要的pom的节点可以在Maven官方仓库中下载https ...