转自:

https://blog.csdn.net/yingzizizizizizzz/article/details/78751305

场景:

一个组件中,含有ul展开数组的组件,在每一行中,都能点击相应的这一行,跳转到对应的页面。

也就是说,组件套组件,子组件中this.props.history.push无法工作。提示没有push这个函数。

因为这时的props中没有history这个属性。

解决办法:

在父组件中,传递一个history。

子组件中用history.push   就可以啦

参考资料:

https://segmentfault.com/a/1190000011137828

  1. <NowplayingChild {...this.props} ></NowplayingChild> //将父组件的属性传递给子组件,否则子组件可能没有属性props,这里用的是属性的简写
  1. <li key={item} onClick={this.handleClick.bind(this,item)}>{item}</li>//子组件的写法
  2. handleClick(id){
  3. //编程式导航
  4. console.log(this.props);
  5. this.props.history.push("/detail/"+id);
  6. }

使用react——解决this.props.history.push无法跳转的问题的更多相关文章

  1. React history.push()无法跳转 url改变页面不渲染

    一.history.push()无法跳转参考了很多文章 研究一下生命周期 render是要有state变化才会执行 BrowserHistory只有props变化 无法触发render 如下改造环境 ...

  2. react-router v4 使用 history 控制路由跳转

    问题 当我们使用react-router v3的时候,我们想跳转路由,我们一般这样处理 我们从react-router导出browserHistory. 我们使用browserHistory.push ...

  3. react native中props的使用

    react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...

  4. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  5. vue-router同路由$router.push不跳转一个简单解决方案

    vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...

  6. iOS - 模态Model视图跳转和Push视图跳转的混合需求实现原理

    在研发中总会遇到一些莫名的需求,本着存在即合理的态度跟大家分享一下"模态Model视图跳转和Push视图跳转的需求实现",本文仅仅传授研发技术不传授产品以及UE的思想,请大家合理对 ...

  7. 解决uni-app props 传递数组修改后不能使用问题

    1.子组件页面结构 //NoticesMarquee 组件 <view v-for="(item, index) in tempList" :key="index& ...

  8. React系列之--props属性

    版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...

  9. A Bite Of React(2) Component, Props and State

    component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...

随机推荐

  1. day 14 自定义模块,常用模块 time .datetime ,time 模块

    内容大纲 一:Import  模块 1,创建一个以tbjx命名的名称空间 2,执行此模块的代码,并将所有内容加载到内存 3,调用此模块的代码要通过tbjx.的方式 二:from 包 import 模块 ...

  2. 在eclipse中,用maven创建web项目

    备注:该文档是之前学习时,根据网上其他童鞋的经验自己测试后梳理,如有侵权,请勿怪,感谢! 1.在eclipse中用maven创建项目,右键new>>Maven Project 2.点击ne ...

  3. Springmvc之表单验证

    1.需要的相关jar 这里采用的是hibernate-validator-5.2.4.Final 和validation-api-1.1.0.Final 两个jar包.Hibernate Valida ...

  4. ConcurrentHashMap相关知识点

    ConcurrentHashMap涉及的知识点:HashMap,HashTable,UnSafe,CAS,数组+链表,Segment,ReentrantLock(非公平锁,公平锁),红黑树. 为什么要 ...

  5. Android之build.prop属性详解

    注:本篇文章是基于MSD648项目(AndroidTV)的prop进行说明. Android版本:4.4.4 内核版本:3.10.86 1.生成build.prop build.prop的生成是由ma ...

  6. DB2 Check Pending Script

    转载 http://www.zinox.com/archives/144 Thanks to Max Petrenko of DB2 Toronto Lab for sharing a very us ...

  7. 异常捕获设置HTTPStatus

    第一步:创建一个异常类 package com.payease.exception; /** * @Created By liuxiaoming * @CreateTime 2017/12/12 下午 ...

  8. 运行零币Zcash(ZEC)

    1.在基于 Ubuntu 或者 Debian 的系统中: $ sudo apt-get install \build-essential pkg-config libc6-dev m4 g++-mul ...

  9. python-poll实现异步IO

    #!usr/bin/python from socket import * from select import * from time import ctime s=socket() s.bind( ...

  10. 深度学习(二)BP求解过程和梯度下降

    一.原理 重点:明白偏导数含义,是该函数在该点的切线,就是变化率,一定要理解变化率. 1)什么是梯度 梯度本意是一个向量(矢量),当某一函数在某点处沿着该方向的方向导数取得该点处的最大值,即函数在该点 ...