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


相关推荐

  • js字符串操作方法(js对象转字符串)

    一、关于字符串分割1、slice(start,end);关于这个方法,一定要搞懂四个关键点:(1)截取字符串时不包括下标为end的元素。(2)end是可选参数,没有时,默认从start到结束的所有字符串。(3)String.slice与Array.slice区别。(4)参数为负数时,是如何处理的。其中第3点其实就是在JavaScript中字符串和数组都具有这个方法,它们…

    2022年4月18日
    51
  • xman的思维导图快捷键_macz技巧分享:思维导图XMind快捷键汇总「建议收藏」

    xman的思维导图快捷键_macz技巧分享:思维导图XMind快捷键汇总「建议收藏」在思维导图XMind中,快捷键是可以大大提高绘图效率的存在。掌握常用的快捷键组合,就可以在键盘上运指如飞,快速地进行思维导图的绘制。还在等什么?感兴趣的朋友,下面就和小编一起来看看吧!在XMind:ZEN中,主要的快捷键类型有四种,分别是:文件(File)、插入(Insert)、编辑(Edit)和查看(View)。一、文件文件快捷键,指的是对当前文件整体的一个操作,常见的功能有…

    2022年6月5日
    66
  • vscode引入vue_vscode配置vue开发环境

    vscode引入vue_vscode配置vue开发环境vs导入vue项目renren-fast-vue使用

    2022年7月28日
    4
  • centos7关闭防火墙的命令(linux系统防火墙关闭)

    一、CentOS6关闭防火墙的命令//临时关闭防火墙serviceiptablesstop//禁止开机启动防火墙chkconfigiptablesoff 二、CentOS7关闭防火墙的命令  CentOS7与 CentOS6在关闭防火墙的命令上,有了很大的区别。具体如下:1. CentOS7使用systemctl来运行命令,而Ce…

    2022年4月11日
    213
  • 设置pycharm背景颜色_python设置背景颜色

    设置pycharm背景颜色_python设置背景颜色PyCharm颜色设置选择主题和背景图片选择字体、修改字体大小新建颜色主题修改背景颜色修改注释颜色File  –>  Setting  (Ctrl+Shift+S)1、选择不同的主题、选择背景图片            Appearnce&Behavior  –>  Appearance2、字体                        Editor  –>  Font3、建…

    2022年8月27日
    12
  • tomcat修改http长度限制_解决浏览器与服务器请求url长度限制[通俗易懂]

    tomcat修改http长度限制_解决浏览器与服务器请求url长度限制[通俗易懂]一、前言Http中get与post本身是没有受到长度限制的,受到限制是浏览器与服务器对url长度限制。具体说明请阅读我的零一篇文章《关于HTTPGET/POST请求参数长度最大值的一个理解误区》。二、概述1、服务器限制我目前使用的服务器一般是tomcat+nginx,它们都是通过控制http请求头的长度来进行限制的,nginx的配置参数为large_client_header_buffer…

    2022年8月24日
    6

发表回复

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

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