React传递参数的多种方式
最常见的就是父子组件之间传递参数
父组件往子组件传值,直接用this.props就可以实现
在父组件中,给需要传递数据的子组件添加一个自定义属性,在子组件中通过this.props就可以获取到父组件传递过去的数据
// 父组件 render() {return (// 使用自定义属性传递需要传递的方法或者参数<ShopUi toson={this.state}></ShopUi> )} //子组件 //通过this.props.toson就可以获取到父组件传递过来的数据 、、如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了tograndson={this.props.toson} 、、孙组件通过this.props.tograndson获取到数据
子组件给父组件传值的话,需要在父组件设置接收函数和state,同时将函数名通过props传递给子组件
也就是给子组件传入父组件的方法,在子组件进行调用
//孙子组件 export default class Grandson extends Component{render(){return (<div style={{border: "1px solid red",margin: "10px"}}> {this.props.name}:<select onChange={this.props.handleSelect}><option value="男">男</option><option value="女">女</option></select></div> )} };//子组件 export default class Child extends Component{render(){return (<div style={{border: "1px solid green",margin: "10px"}}>{this.props.name}:<input onChange={this.props.handleVal}/><Grandson name="性别" handleSelect={this.props.handleSelect}/></div> )} };//父组件 export default class Parent extends Component{constructor(props){super(props)this.state={username: '',sex: ''} },handleVal(event){this.setState({username: event.target.value});},handleSelect(value) {this.setState({sex: event.target.value});},render(){return (<div style={{border: "1px solid #000",padding: "10px"}}><div>用户姓名:{this.state.username}</div><div>用户性别:{this.state.sex}</div><Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/></div> )} }
前一段时间有人问过我这样一个问题,constructor里面的super()是干嘛用的?
总结一下:
如果要在子类的constructor里使用this,必须调用父类constructor,否则就拿不到this
那么问题就来了,如何调用父类的constructor呢? 通过super()
如果要在constructor里使用父组件传递过来的参数,必须在调用父组件super时,传递参数给父组件的constructor
如果不在constructor里面使用this,或者参数,就不需要super ; 因为React以及帮你做了this,props的绑定
路由传参
安装 npm install react-router-dom --save-dev
定义路由(一般会放在外面)
<HashRouter> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/detail" component={Detail}/> </Switch> </HashRouter>
当页面跳转时
<li onClick={el => this.props.history.push({pathname:'/detail',state:{id:3}})} > </li>
接收 通过this.props.history.location可以获取到传递过来的数据
路由传参可能会有这个问题,就是只有在路由定义时挂载的组件中才会有props里面的location history match
路由上挂载的那个组件一般都是Container.js,一般我们会往下分出UI.js组件,在这里面进行点击跳转,UI组件props里没有location history match
需要用到高阶组件withRouter
状态提升
将多个组件需要共享的状态提升到离他们最近的那个公共父组件上,然后父组件通过props分发给子组件
context
当某个组件在自己的context中保存了某个状态,那个该组件下的所有子孙组件都可以访问到这个状态,不需要中间组件的传递,而这个组件的父组件是没办法访问的
class Index extends Component {static childContextTypes = {themeColor: PropTypes.string}constructor () {super()this.state = { themeColor: 'red' }}getChildContext () {return { themeColor: this.state.themeColor }}render () {return (<div><Header /><Main /></div>)}
}通过getChildContext()将属性传递给所有的子孙组件提供 context 的组件必须提供 childContextTypes
作为 context 的声明和验证。
class Title extends Component {static contextTypes = {themeColor: PropTypes.string}render () {return (<h1 style={{ color: this.context.themeColor }}>标题</h1>)} }子组件要获取 context 里面的内容的话,就必须写contextTypes
来声明和验证你需要获取的状态的类型,它也是必写的,如果你不写就无法获取 context 里面的状态。Title
想获取themeColor
,它是一个字符串,我们就在contextTypes
里面进行声明。
引入redux
redux为React提供可预测化的状态管理机制
redux将整个应用状态存储到store,store里保存着一个state状态树
组件可以派发(dispatch) 行为 (action) 给store , 而不是直接通知其它组件
其它组件可以通过订阅store中的状态state来刷新自己的视图
转载于:https://www.cnblogs.com/luxiaot/p/10093986.html
React传递参数的多种方式相关推荐
- Python学习:传递参数的多种方式
Python中根据函数的输入参数以及是否有返回值可分为四种函数: 1.无参数无返回值 2.有参数无返回值 3.无参数有返回值 4.有参数无返回值 Python 中参数传递有下列五种方式; 1.位置传递 ...
- springboot获取多个请求参数_springboot获取URL请求参数的多种方式
1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交. /** * 1.直接把表单的参数写在Controller相应的方法的形参中 * @pa ...
- ios页面间传递参数四种方式
ios页面间传递参数四种方式 1.使用SharedApplication,定义一个变量来传递. 2.使用文件,或者NSUserdefault来传递 3.通过一个单例的class来传递 4.通过Dele ...
- ride传递参数是unicode方式解决方法
今天做自动化发现这个getaddrinfo() argument 2 must be integer or string问题,看来是传递参数问题,打印后发现ride传递过来得的确是unicode方式, ...
- python 函数传递参数的多种方法
python中函数根据是否有返回值可以分为四种:无参数无返回值,无参数有返回值,有参数无返回值,有参数有返回值. Python中函数传递参数的形式主要有以下五种,分别为位置传递,关键字传递,默认值传递 ...
- 开源博客QBlog开发者视频教程:生命周期Page_Load介绍及简洁传递参数的重构方式(四)...
2019独角兽企业重金招聘Python工程师标准>>> 前言: 两三天没出视频了,主要是接下来的视频不好录制[给自己找个借口,其实顺路看了两天动漫], 当然中间也在一直想怎么录,怎么 ...
- 学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密(方式一)
参考地址:https://blog.csdn.net/baidu_38990811/article/details/83540404
- [转]Delphi过程函数传递参数的几种方式
在Delphi过程.函数中传递参数几个修饰符为Const.Var.Out.另一种不加修饰符的为默认按值传递参数. 一.默认方式以值方式传递参数 procedure TForm1.ProcNormal( ...
- GET 和POST传递参数
使用GET方式传递参数 使用POST方式传递参数 提交.重置.普通按钮如何传送参数 单行与多行文本输入框如何传送参数 单选按钮与复选框如何传送参数 隐藏表单字段与图像字段如何传送参数 列表框如何传送参 ...
最新文章
- pond and pool
- webview部分安卓机中文乱码
- AJAX全套(JSONP、CORS)
- 2018百度之星程序设计大赛 - 资格赛 P1006三原色图(MST,并查集)
- ZeroMQ接口函数之 :zmq_proxy – 开始ZMQ内置代理
- 关于VMware的Server版卸载须知
- 计算机软件配置项(转),如何将表格转换配置导入另一台计算机 - 应用技巧 - 常青藤软件工作室...
- java根据身份证号判断当前年龄
- SMART原则是什么
- 数据库SQL优化大总结1之- 百万级数据库优化方案
- 期货市场计算机技术指难,期货交易中最重要的是什么?最难的是什么?
- 为什么好多人说win8不好用?
- 2010年3月4日:软件工程基本词汇
- 安卓java 模拟直装_安卓2.3java模拟器下载
- 并(zhao)查(die)集详解以及其优化版本
- web如何加入视频?video
- bp 神经网络 优点 不足_【学术论文】基于灰度共生矩阵和BP神经网络的乳腺肿瘤识别...
- Vue开发环境搭建和vue-cli脚手架
- 六管SRAM存储单元之理解记录
- activiti会签功能
热门文章
- html5跟html4有什么区别,Html5和Html4的区别
- 腾讯地图api修改信息窗口样式_ThingJS通过地图的信息窗口展示常见数据
- Mysql把查询的列作为判断条件(case函数)
- 网络用词:小狼狗小奶狗区别
- Kotlin入门(7)循环语句的操作
- 仿手环运动app的html,连接手环.html
- HDU 2503 a/b + c/d(最大公约数与最小公倍数,板子题)
- RHEL 4 安装单实例oracle 10g
- 724A - CAN总线
- 例子:选择一个联系人