使用react——解决this.props.history.push无法跳转的问题
转自:
https://blog.csdn.net/yingzizizizizizzz/article/details/78751305
场景:
一个组件中,含有ul展开数组的组件,在每一行中,都能点击相应的这一行,跳转到对应的页面。
也就是说,组件套组件,子组件中this.props.history.push无法工作。提示没有push这个函数。
因为这时的props中没有history这个属性。
解决办法:
在父组件中,传递一个history。
子组件中用history.push 就可以啦
参考资料:
https://segmentfault.com/a/1190000011137828
<NowplayingChild {...this.props} ></NowplayingChild> //将父组件的属性传递给子组件,否则子组件可能没有属性props,这里用的是属性的简写
<li key={item} onClick={this.handleClick.bind(this,item)}>{item}</li>//子组件的写法
handleClick(id){
//编程式导航
console.log(this.props);
this.props.history.push("/detail/"+id);
}
使用react——解决this.props.history.push无法跳转的问题的更多相关文章
- React history.push()无法跳转 url改变页面不渲染
一.history.push()无法跳转参考了很多文章 研究一下生命周期 render是要有state变化才会执行 BrowserHistory只有props变化 无法触发render 如下改造环境 ...
- react-router v4 使用 history 控制路由跳转
问题 当我们使用react-router v3的时候,我们想跳转路由,我们一般这样处理 我们从react-router导出browserHistory. 我们使用browserHistory.push ...
- react native中props的使用
react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- vue-router同路由$router.push不跳转一个简单解决方案
vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...
- iOS - 模态Model视图跳转和Push视图跳转的混合需求实现原理
在研发中总会遇到一些莫名的需求,本着存在即合理的态度跟大家分享一下"模态Model视图跳转和Push视图跳转的需求实现",本文仅仅传授研发技术不传授产品以及UE的思想,请大家合理对 ...
- 解决uni-app props 传递数组修改后不能使用问题
1.子组件页面结构 //NoticesMarquee 组件 <view v-for="(item, index) in tempList" :key="index& ...
- React系列之--props属性
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...
- A Bite Of React(2) Component, Props and State
component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...
随机推荐
- Kafka入门学习--基础
Kafka是什么 Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就可 ...
- i2c_smbs 函数
i2c_smbus系列函数有: s32 i2c_smbus_read_byte(const struct i2c_client *client); s32 i2c_smbus_write_byte(c ...
- 持续集成篇:jenkins搭建和job运行
好久没有更博了,最近都在忙着其他事情,年底前加上这章再更5篇,10月份开始因为公司业务,要接触appium啦,之后应该也会有所分享. Jenkins所需环境 硬件需求: ①至少需要有256M内存,推 ...
- 【VS2015】关于VS2015如何运行的问题
各位看官,lt's been a long time since we met last time. 是否习惯了CodeBlocks那种简易编写C文件?一到写工程就懵逼的状态?今天我给他们带来如何让C ...
- 3.1)DFM-塑胶件设计总章
本章目的:各种塑胶工艺了解,DFM-塑胶件的设计准则是依据哪种工艺. 1.塑胶概念 塑胶的定义(美国塑料工业协会): 塑胶主要由碳.氧.氢和氮及其他有机或无机元素所构成,成品为固体,在制造过程中是熔融 ...
- OS X获取process.env.NODE_ENV出错
原来项目是其它小组在维护,现在我们需要维护部分功能,把项目带到OS X上运行发现 webpack.config.js获取process.env.NODE_ENV变量出错 解决: 根据电脑操作系统平台类 ...
- 【实战】某项目SQL注入引发的思考
数据包: 测试参数:username,测试payload: ' ' or '1'='1 ' or '1'='2 响应结果都未发生任何变化,借助sqlmap测试,结果一样: 尝试在or前面进行简单的fu ...
- 剑指offer——面试题30:包含min函数的栈
#include"iostream" #include"stdio.h" using namespace std; ; ; template<typena ...
- Mac 10.12安装7zip/rar解压/压缩工具7zip-Keka
说明:Keka支持解压和压缩,基本这个软件全部格式都搞定. 下载: (链接: https://pan.baidu.com/s/1kVmsj8z 密码: pydh)
- try -catch-finally一些要点
try -catch-finally是处理程序异常时使用,当程序正常时,先走try然后到finally语句,不正常时:程序先走try,然后到catch里面的语句,最后到finally;从上面可以看出, ...