使用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 ...
随机推荐
- JSP常用Form表单控件
[easyui]--combobox--赋值和获取选中的值 /初始化下拉选框 $('#communityIdDiv').combobox({ url:basepath+"pushContro ...
- php正则验证邮箱、手机号、姓名、身份证、特殊符号等
1.邮箱验证 1 $email='1515212@qq'; 2 $preg_email='/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@([a-zA-Z0-9]+[-.])+( ...
- 等价类计数问题(Polya定理和burnside引理)
零.约定: (置换等名词会在前置知识中有解释) \(1.\)在本文中,题目要求的染色方案等统称为"元素". \(2.\)两个元素严格相等我们记做"\(=\)", ...
- es6里class类
/** * Created by issuser on 2018/11/27. *///如果静态方法包含this关键字,这个this指的是类,而不是实例./** (1)类的实例属性 1.类的实例属性可 ...
- 什么是Java代码的编译与反编译?(转)
转自:http://java.tedu.cn/ask/203119.html Java代码的编译与反编译 一.什么是编译 1.利用编译程序从源语言编写的源程序产生目标程序的过程. 2.用编译程序产生目 ...
- PHP操作sqlserver乱码解决
将捕获的参数编码转换为GB2312即可 function ($string){ returen iconv("UFT-8","GB2312//IGNORE",$ ...
- 四大组件之Activity——组件间传递数据的4种常用方法
在Android中传递数据的方法非常多,本次介绍4中比较常用的数据传递方法: 通过Intent/Bundle传递数据 通过静态变量(static)传递数据:需构建跳转页面相应静态变量http://bl ...
- ActiveMQ:Exception occurred while processing this request, check the log for more information!
出现上面错误的原因有以下两种 1 jdk的版本和activemq的版本不符 安装完ActiveMQ之后,通过http://IP:8161登陆到控制台. 通过测试代码给服务端发送队列消息,在控制台点击q ...
- python-Event事件线程同步和互斥
#!/usr/bin/python #coding=utf-8 #用于线程间通信,通过事件标识控制 import threading from time import sleep,ctime def ...
- ubuntu 16.04安装好后没声音的解决方法
刚安装好Ubuntu16.04 后没声音,找了好多方法都不行,看到网上说通过安装pavucontrol和alsamixer调节解决,最后无意发现一个方法,总算是可以用了,在此记录一下.可能有的可以解决 ...