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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • siege 用户登录_Siege详解[通俗易懂]

    siege 用户登录_Siege详解[通俗易懂]Siege是一款开源的压力测试工具,设计用于评估WEB应用在压力下的承受能力。可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访问下重复进行。Siege可以从您选择的预置列表中请求随机的URL。所以siege可用于仿真用户请求负载,而ab则不能。但不要使用siege来执行最高性能基准调校测试,这方面ab就准确很多。一、安装编译安装tar-z…

    2025年8月6日
    4
  • Servlet和JSP的交互方式[通俗易懂]

    Servlet和JSP的交互方式[通俗易懂]文章目录Servlet和JSP的交互方式Servlet:jsp:1.表单:2.超链接超链接3.forward:获取参数值request.getParameter(“id”)处理乱码newString(request.getParameter(“name”).getBytes(“ISO8859_1″),”UTF-8”)Servlet和JSP的交互方式Servlet:1.request.getRequestDispatcher(“url”).forward(requsest,response);这个是

    2022年6月22日
    25
  • 搭建DNS服务器的那些知识「建议收藏」

    搭建DNS服务器的那些知识「建议收藏」一、DNS服务概述:1.什么是DNS?DNS(DomainNameSystem)域名系统,在TCP/IP网络中有非常重要的地位,能够提供域名与IP地址的解析服务,而不用去记住能够被机器直接读取的IP数串。通过域名,最终得到该域名对应的IP地址的过程叫做域名解析。DNS协议运行在UDP协议之上,使用端口53号。2.什么是域、域名?域(domain)是计算机网络的一种形式,其中所有用户账户,计算机,打印机和其他安全主体都在位于称为域控制器的一个或多个中央计算机集群上的中央数据库中注册。

    2025年9月16日
    4
  • ucinet网络分析使用总结

    ucinet网络分析使用总结ucinet介绍UCINET为菜单驱动的Windows程序,可能是最知名和最经常被使用的处理社会网络数据和其他相似性数据的综合性分析程序。与UCINET捆绑在一起的还有Pajek、Mage和NetDraw等三个软件。UCINET能够处理的原始数据为矩阵格式,提供了大量数据管理和转化工具。该程序本身不包含网络可视化的图形程序,但可将数据和处理结果输出至NetDraw、Pajek、Mage和Kr…

    2022年6月7日
    99
  • Prometheus时序数据库

    Prometheus时序数据库Prometheus时序数据库 一、Prometheus1、Prometheus安装1)源码安装prometheus安装包最新版本下载地址:https://prometheus.io/download/wgethttps://github.com/prometheus/prometheus/releases/download/v2.3.2/prometheus-2….

    2022年9月28日
    2
  • idea2021.4.14 永久激活码_通用破解码

    idea2021.4.14 永久激活码_通用破解码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月17日
    75

发表回复

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

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