使用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 ...
随机推荐
- AssertJ断言系列-----------<数据库断言三>
其实,是有很多种数据断言的使用.那么,我们在接口的测试中,到底应不应该加上数据库断言呢?我的观点是,视情况而定:某一些特殊的场景或者特殊的业务,那么我们就一定要加上数据库断言.不是我们测试人员,不相信 ...
- leetcode-686-Repeated String Match(重复多少次A能够找到B)
题目描述: Given two strings A and B, find the minimum number of times A has to be repeated such that B i ...
- windows任务管理器所查的网站
添加menu https://blog.csdn.net/u012273127/article/details/71293088 点击菜单打开对话框 https://blog.csdn.net/ ...
- E - Guess the Root 拉格朗日差值法+交互
题目传送门 题意:告诉你存在一个未知项系数最高为10的$f(x)$,你最多可以有50次询问,每次询问给出一个$x'$,系统会返回你$f(x')$的值,你需要猜一个$x''$,使得$f(x'')=0$, ...
- [Xamarin] 透過 IsolatedStorageFile儲存資料(转帖)
開發手機App通常都會遇到想要儲存資料的,舉個例來說,像是 (圖片來源:http://docs.xamarin.com/guides/android/application_fundamentals/ ...
- try -catch-finally一些要点
try -catch-finally是处理程序异常时使用,当程序正常时,先走try然后到finally语句,不正常时:程序先走try,然后到catch里面的语句,最后到finally;从上面可以看出, ...
- hibernate多对多单向关联
多对多单向,一个学生可以有多个老师,一个老师也可以教多个学生.老师可以找到他的学生,学生找不到教他的老师. 老师类Teacher: package com.oracle.hibernate; impo ...
- 解决windows10下总是很快自动黑屏进入睡眠问题
在用win10的过程中总是过几分钟不操作电脑,就自动黑屏睡眠了. 下面讲解一下如何解决这个问题: 第一步:win +r 输入regedit.exe 运行注册表管理器 第二步:定位到 HKEY_LOC ...
- 关系型数据库MySQL多实例
简介 MySQL数据库是一个中小型关系型数据库管理系统,软件开发者为瑞典MySQL AB公司.在2008年1月16号被Sun公司收购后Sun公司又被oracle公司收购.目前MySQL被广泛地应用在I ...
- Java PrepareStatement
1.PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程2.使用 Statement 对象.在对数据库只执行一次性存取的时侯,用 Statement 对象 ...