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为单页面跳转页面
  },

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 电容是根据什么分类_电容的分类与识别图片

    电容是根据什么分类_电容的分类与识别图片一、瓷介电容器(CC)1.结构用陶瓷材料作介质,在陶瓷表面涂覆一层金属(银)薄膜,再经高温烧结后作为电极而成。瓷介电容器又分1类电介质(NPO、CCG));2类电介质(X7R、2X1)和3类电介质(Y5V、2F4)瓷介电容器。2.特点1类瓷介电容器具有温度系数小、稳定性高、损耗低、耐压高等优点。最大容量不超过1000pF,常用的有CC1、CC2、CC18A、CC11、CCG等系…

    2022年8月22日
    7
  • 游戏场景建模用什么软件?

    游戏场景建模用什么软件?游戏场景建模用什么软件?想要入行游戏领域第一步大家要知道建模要用到的软件“ZBrush”“3DMax”“MAYA”ZBrush:高模的制作软件,用ZB做角色是很很好的,可是难度系数也挺大,平常要多看看人体的构造,或找人体写真来把控不一样的人体肌肉转变,多了解多实践。3DMax:3DMax相对而言是一个较为简单易学的软件,用于做建筑场景也很的好使。可是3D要想把他学精依然要1个步骤的,因此掌握软件很重要,3D建模的软件物品很杂很碎,还需多练才最重要,多做一些实例熟记的也差不多了。MAYA:熟记人

    2022年5月19日
    45
  • 【Oracle】LISTAGG 函数的使用

    【Oracle】LISTAGG 函数的使用LISTAGG 函数介绍 listagg 函数是 Oracle11 2 推出的新特性 其主要功能类似于 wmsys wm concat 函数 即将数据分组后 把指定列的数据再通过指定符号合并 LISTAGG 使用 listagg 函数有两个参数 1 要合并的列名 2 自定义连接符号 LISTAGG 函数既是分析函数 也是聚合函数所以 它有两种用法 1 分析函数

    2025年7月23日
    2
  • 硬核!SpringBoot连接MySQL数据库,十分钟啃透「建议收藏」

    硬核!SpringBoot连接MySQL数据库,十分钟啃透「建议收藏」目录1.pom.xml添加依赖2.application.properties添加数据库配置3.添加实体类4.添加Dao5.添加Controller6.新建数据库7.测试上篇只需两步!Eclipse+Maven快速构建第一个SpringBoot项目已经构建了一个SpringBoot项目,本文在此基础上进行连接MySQL数据库的操作。1.pom.xml添加依赖<dependency><groupId&.

    2022年6月25日
    34
  • http和tcp的区别和联系_udp协议和tcp协议的区别

    http和tcp的区别和联系_udp协议和tcp协议的区别一、基本概念1、TCP连接手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接。TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上。建立起一个TCP连接需要经过“三次握手”:第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认;…

    2026年2月5日
    11
  • Crontab定时任务配置

    Crontab定时任务配置一、开启crontab1.查看crontab是否启动sudolaunchctllist|grepcron2.检查需要的文件ls-al/etc/crontab3.如果crontab文件不存在则创建sudotouch/etc/crontab上述操作完成之后就可以正常使用crontab啦二、crontab服务开启、关闭1.开启su…

    2025年8月24日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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