React多页面跳转[通俗易懂]

React多页面跳转[通俗易懂]render(){const{app:{locationQuery}}=this.props;////////////tolist.jsconst{子页面数据}=this.state;const{id}=locationQuery;///获取当前页面地址栏的idconstinfo=queryA…

大家好,又见面了,我是你们的朋友全栈君。

const queryArray = (array, key, keyAlias = 'key') => {
  if (!(array instanceof Array)) {
    return null
  }
  let data;
  for (let item of array) {
    if (item[keyAlias] === key) {
      data = item;
      break
    }
  }
  if (data) {
    return data
  }
  return null
}
render () { const { app: { locationQuery } } = this.props; tolist.js const { 子页面数据 } = this.state; const { id } = locationQuery; ///获取当前页面地址栏的id const info = queryArray(子页面数据, parseInt(id), 'id'); ///根据id拿到当前页面id下面的数据存放到info console.log(info); let pagination = null; if (this.state.pages) { pagination = this.renderPagination(this.state.page, this.state.pages); } const Functionlist = () => { return ( <div> {info ? // 判断如果有此id 渲染一下内容 <div className={styles.center}> <h2>{info.title}</h2> <video src={info.url} controls="controls"></video> </div> : null} // 如果没有就渲染为空 </div> ) } return ( <DocumentTitle title="1234"> <div ref={node => this.node = node} className={styles.notice}> <div> <Functionlist /> </div> </div> </DocumentTitle> ) }
<Link to={"/video/tolist_1?id="+item.id}  key={index}>      two.js
      <li className={styles.li}></li>
</Link>
 {
    path:'/video/tolist',
    component:()=>import('../routes/video/tolist')     //文件夹 video 下面三个js   twolist.js&&&two.js /// video.js为单页面跳转页面
  },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139226.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ios touchesBegan不触发

    ios touchesBegan不触发iostouchesBegan不触发今天简单写了一个touchesBegan,发现无法触发,点击无效,网上找了半天没有效果。最终发现问题是uiimageview需要开启交互:

  • 卸载MySQL Connector NET无法卸载

    卸载MySQL Connector NET无法卸载卸载MySQLConnectorNET无法卸载最近安装了MYSQL数据库,安装完发现安装在了系统C盘,对于文件整理控加一丢丢强迫症的我来说,太介意了,不能忍。这里是解决办法:安装MYSQL自定义路径方法于是,开始卸载MYSQL,结果,ConnectorNET始终卸载不掉。网上看到了很多方法,删文件删注册表都无济于事,丝毫没有成功。终于,在google里找到可行的解决方法。原文网址:Cannotuninstall/repair/ChangeMySQL-Connector-net?Iss

  • mysql优化 面试_数据库优化工具

    mysql优化 面试_数据库优化工具点赞是一种积极的生活态度!有支持才有动力!微信搜索公众号【达摩克利斯之笔】获取更多资源,文末有二维码!前言数据库优化是一个老生常谈的问题,刚入门的小白或者工作N年的光头对这个问题应该都不陌生,你要面试一个中高级工程师那么他就想”哥俩好”一样那么粘,面试官肯定会问这个问题,这篇文章我们就和它哥俩好!而且这个问题就是一个送分题,数据库的优化方案基本就是那些,答案也都是固定的,大家只要好好…

    2022年10月24日
  • hi3531dv200开发板_hi3516dv300参数

    hi3531dv200开发板_hi3516dv300参数前言安装环境,默认你是有Linux系统的,不管是VM虚拟机还是docker还是WSL,也不对系统进行要求。此教程默认环境如下:Ubuntu18.04、Anaconda(Python3.8.5)、Anaconda安装不同版本Python

  • 一个量化交易策略师的自白

    一个量化交易策略师的自白转一个量化交易策略师的自白    我之前在全球top5券商工作时也主要以CTA研究为主,每天都在不停的进行各种回测和开发。彼时,部门的CTA交易主要集中在股指期货的日内投机上,基本市场上能搜集到的各种书籍和报告我都浏览过。不过,从实际运用的角度来看,不同的技术分析方法,指标类切线类也好,形态类波浪类也罢,无论其历史背景和基本原理如何,其实质都是基…

  • 实验报告:图书销售管理系统数据库SQL应用编程

    实验报告:图书销售管理系统数据库SQL应用编程实验目的针对图书销售管理数据库开发,了解SQL语言DDL、DML、DQL类型语句在数据库操作访问中的应用方法,培养数据库SQL编程访问能力。同时也掌握基本的数据库触发器、存储过程SQL编程方法,培养数据库后端编程能力。本实验完成图书销售管理系统数据库的SQL数据操作访问和后端数据处理功能。实验原理首先对图书销售管理系统进行数据需求分析,定义组成系统数据结构的实体、实体属性以及实体之间的关系。采用实体关系图(E-R模型图)方法来展示图书销售管理系统的概念数据模型与逻辑数据模型。利用PowerDes

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号