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


相关推荐

  • ip addr命令作用_linux带内ip

    ip addr命令作用_linux带内ip在Linux命令行输入ipaddr命令[root@Orchid~]#ipaddr输出结果为:1:lo:<LOOPBACK,UP,LOWER_UP>mtu65536qdiscnoqueuestateUNKNOWNgroupdefaultqlen1000link/loopback00:00:00:00:00:00brd00:00:00:00:00:00inet127.0.0.1/8scopehostloval

    2022年7月27日
  • Linux 解压 zip 分卷

    Linux 解压 zip 分卷对于一个大的文件,使用分卷压缩得到如下文件:传到Linux目录下,希望解压出来,需要使用zip-F命令修复分卷,从而合成正确的一个压缩文件zip-FUCF-101.zip–outucf101.zip得到ucf101.zip,然后解压ucf101.zip即可unzipucf101.zip…

    2022年5月23日
  • x86平台inline hook原理和实现

    x86平台inline hook原理和实现概念inlinehook是一种通过修改机器码的方式来实现hook的技术。原理对于正常执行的程序,它的函数调用流程大概是这样的:0x1000地址的call指令执行后跳转到0x3000地址处执行

    2022年7月2日
  • 安卓7.1精简版下载_asm字节码

    安卓7.1精简版下载_asm字节码ASM 7.1 发布

    2022年4月21日
  • 实体-联系图(ER图)_实体关系图

    实体-联系图(ER图)_实体关系图我们通常用实体、联系和属性这三个概念来理解现实问题,因此ER模型比较接近人的思维方式。此外,ER模型用简单的图形符号表达系统分析员对问题域的理解,不熟悉计算机技术的用户也能理解它,因此,ER模型可以作为用户与分析员之间有效的交流工具。一、ER模型ER模型中包含3种相互关联的信息:数据对象、数据对象的属性及数据对象彼此之间相互连接的关系。1.数据对象数据对象是对软件必须理解的复合信息…

    2022年9月15日
  • docker部署mysql的坏处_docker创建mysql数据库

    docker部署mysql的坏处_docker创建mysql数据库首先,确认创建容器的时候添加了-d参数,以守护进程的方式运行容器。或者,之前容器能够正常启动,突然启动不了,可以参考下面的解决方案。使用free命令查看内存状态[root@VM-16-15-centos~]#freetotalusedfreesharedbuff/cacheavailableMem:38263362077648504884220812

    2022年9月26日

发表回复

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

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