使用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 ...
随机推荐
- mysql 查询小技巧
数据字段中存放的是id集,形如 1,2,15,35 也可类推json格式 查询时不用拆分了, 用上 instr.concat搜索和连接字符串 查询fids中包含15的 select * from ...
- 52.RocketMQ 事务
今天的博客有点多,因为前几天一直用笔记录,今天都补上了.后面的博客先停一段时间,后面还有dubbo.storm.kafka.solor.nginx.keepalived.fastdfs等内容,只是因为 ...
- Swagger2使用记录
1. Swagger2使用记录 1.1. Bean配置文件 @Configuration public class Swagger2 { @Bean public Docket createRestA ...
- [转] String to Date conversion in hive - 在 Hive 中各种字符串转换成日期格式
[From] http://bigdataprogrammers.com/string-date-conversion-hive/ Please refer below table to conver ...
- SQL中动态进行行转列
课程表 CREATE TABLE [dbo].[demo_Course]( [Cid] [uniqueidentifier] NOT NULL, ) NULL, CONSTRAINT [PK_demo ...
- Git的介绍和使用
Git是目前世界上最先进的分布式版本控制系统 Git的安装 1.在linux上安装 你可以先输入git,看看系统是不是已经自带了git 或者 sudo apt-get install git 就可以 ...
- 【文档】四、Mysql Binlog事件含义详解
下面对binlog中事件做个简单说明: UNKNOWN_EVENT 这个事件类型应该永远不会出现.它从不会写入binlog中.如果binlog中的事件没法被识别成其他已知事件,他被当做UNKNOWN_ ...
- 3D效果
3D transform:rotate3d(x,y,z,a) (0.6,1,0.5,45deg) transform-origin 允许改变转换元素的位置,(中心点) transform-style ...
- 从mdb到crash
本文面向使用过Solaris的mdb但是没有使用过Linux的crash的同学.比如说我自己,mdb用了很多年,现在全面转向Linux平台,于是很好奇Linux有没有类似的工具.熟悉Solaris的同 ...
- Field [_id] is a metadata field and cannot be added inside a document. Use the index API request parameters--转
https://github.com/elasticquent/Elasticquent/issues/53 the data is coming from a Mongo DB instance. ...