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


相关推荐

  • linux下mysql怎么备份_Linux下如何进行MySQL数据库备份和导入

    linux下mysql怎么备份_Linux下如何进行MySQL数据库备份和导入1),数据库的备份1.导出整个数据库mysqldump-u用户名-p数据库名>导出的文件名例:mysqldump-udbadmin-pmyblog>/home/zhangy/blog/database_bak/myblog.sql2.导出一个表mysqldump-u用户名-p数据库名表名>导出的文件名例:mysqldump-udbadmin…

    2022年5月27日
    32
  • 利用139邮箱的免费短信提醒作为报警接口「建议收藏」

    利用139邮箱的免费短信提醒作为报警接口「建议收藏」各位开发者手机短信里肯定都收到过线上业务报警短信,邮箱里肯定有更多报警邮件,很多公司都把报警信息通过邮件发送,但是这样不能保证接收到。通过短信发送的话,即使很多短信接口很便宜,但是每条也有四五分钱,而且报警信息通过不会单个出现,所以,万一bug集中出现,就亏大了。然后我发现了个神器,以前一直没有注意的垃圾信息:移动提供的默认139邮箱,每次收到邮件都会发送免费短信,既然这样,为何不把报警邮件发到13

    2022年10月13日
    1
  • react中postMessage与addEventListener的使用

    react中postMessage与addEventListener的使用有时候两个页面之间不是父子组件的情况下,信息交互很难搞,看到有人用postmessage来进行消息交互,我也试了一下,哎呀妈真香!!!1、首先在需要发送消息的界面中使用postMessage使用的是React+TypeScript,逻辑是更新提交的时候刷新打开当前页面的父窗口,postMessage用法如下:if(window.opener&&window.opener.location&&window.opener.location.href){

    2022年7月12日
    55
  • 2021goland激活码【在线破解激活】

    2021goland激活码【在线破解激活】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月17日
    70
  • 超简单部署使用Maven私库 Nexus

    超简单部署使用Maven私库 Nexusdocker拉取:dockerpulldocker.io/sonatype/nexus3运行容器:dockerrun-d-p8085:8081–namenexusdocker.io/sonatype/nexus,映射到本地的8085端口,等一会儿就好了,用dockerps-a命令查看访问地址:http://192.64.23.111:8085/)…

    2022年7月18日
    11
  • SpringBoot——MybatisPlus条件查询

    SpringBoot——MybatisPlus条件查询SpringBoot——MybatisPlus条件查询

    2022年4月23日
    163

发表回复

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

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