React 组件之间传递参数

其实react组件之间传递参数是比较简单的，但是没有具体的使用过，组件之间传递参数是比较常见的事情，所以记录一下，防止以后自己在网上胡乱的翻找

最近做了一个商品的列表页面，我想通过点击修改能够实现商品的修改，因为商品的信息比较多，所以修改就单独写了一个组件 EditGoodsInfo.js 那么我在商品列表页面组件中点击修改按钮的时候就需要把商品的goodsguid 传递给这个修改组件

点击修改的时候，弹出一个 Drawer （antd 中的抽屉），在弹出的Drawer中存放EditGoodsInfo.js这个组件

           <Drawertitle="修改商品信息"placement="right"size="large"width="736px"onClose={()=>this.onClose()}visible={this.state.drawerVisiable}extra={<Space><Button onClick={()=>this.onClose()}>Cancel</Button><Button type="primary" onClick={()=>this.onClose()}>OK</Button></Space>}><EditGoodsInfo goodsguid={this.state.mgoodsguid}></EditGoodsInfo></Drawer>

可以看到的是我直接把goodsguid 这个最为EditGoodsInfo的属性，那么在 EditGoodsInfo 这个组件中我们通过构造函数就可以获取到goodsguid

在控制台中，我们可以查看输出：

上面就是组件传入参数的一种方式，参数作为组件的一个属性，在组件的的构造函数的props中就能看到这个属性对应的值

希望对你有所帮助！

React 组件之间传递参数相关推荐

react组件之间传递信息/react组件之间值的传递
react组件之间传递信息/react组件之间值的传递首先咱们先来了解一下,数据是怎么进行相互间传递的; api和组件的区别:一个是逻辑层的方法函数,一个是表现层的组件(方法函数). api是一组预 ...
React组件之间传值
前言今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题.下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可能用中 ...
react 显示隐藏组件的方法_10种React组件之间通信的方法
来源 | https://segmentfault.com/a/1190000023585646 这两天被临时抽调到别的项目组去做一个小项目的迭代.这个项目前端是用React,只是个小型项目所以并没有 ...
前端React教程第三课数据是如何在 React 组件之间流动
04 数据是如何在 React 组件之间流动的?(上) 通过前面 3 个课时的学习,相信你已经对 React 生命周期相关的"Why""What"和" ...
Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析挂载点: Vue实例的el属性对应的id,vue只会 ...
vue.js 组件之间传递数据 1
vue.js 组件之间传递数据框架浏览数:437 2017-8-21 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据 ...
[html] 在两个iframe之间传递参数的方法有哪些？
[html] 在两个iframe之间传递参数的方法有哪些? 通过postMessage与父级通过,父级传递消息通过websocket通信如果是同一个域名下可用stroage,监听storageChan ...
java怎么跟qtp脚本传参数_QTP多个Action之间传递参数的方法详解
脚本的朋友们都会碰到多个Action之间传递参数的问题,想当年我也是研究了好久才成功的,网上虽然有很多文章都在讲这个问题,但是大多都是雷同的抄来抄去不能解决实际问题,也有可能是我太笨了吧.下面我们来详 ...
Asp.net页面之间传递参数的几种方法
Asp.net页面之间传递参数的几种方法第一种方法: 通过URL链接地址传递Request.QueryString send.aspx: protected void Button1_Clic ...

React 组件之间传递参数

React 组件之间传递参数相关推荐

最新文章

热门文章