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


相关推荐

  • 哪些异常是RuntimeException?Sql异常属于RuntimeException吗?Spring下SQL异常事务回滚

    哪些异常是RuntimeException?Sql异常属于RuntimeException吗?Spring下SQL异常事务回滚更多Spring事务问题请访问链接:Spring事务回滚疑难详解一,为什么框架中根本没有对Exception的一般子类进行回滚配置,异常发生时,事务都进行了回滚,说好的只会对RuntimeException(Unchecked非受检异常)回滚呢?此时,我们就有必要了解一下,RuntimeException所包含的子类具体有哪些:这时,或许你就…

    2022年7月24日
    11
  • 系统分析师零散知识点「建议收藏」

    系统分析师零散知识点「建议收藏」数据库连接池技术是指在系统初期或者初次使用时,完成数据库的连接,以后不再释放此连接,在处理后面的请求时,反复使用这些已经建立的连接。这种方式可以大大减少数据库的处理时间,有利于提高系统的整体性能、可测量性和扩展性。应用服务器的高速缓存?在应用服务器中有页面的缓存和数据库的缓存。页面的缓存是指将特定的URL对应的页面在缓存中予以记录,以便在

    2022年5月24日
    84
  • MySQL使用SQL语句修改表名

    MySQL使用SQL语句修改表名MySQL中可以使用renametable这个SQL语句来修改表名。renametable这个SQL语句来修改表名的基本语法是:RENAMETABLE<旧表名>TO<新表名>;我们来把test表修改为test1表。1、首先查看一下当前数据库中有哪些表。mysql>showtables;+——————-+…

    2022年5月6日
    56
  • Laravel项目的性能优化

    Laravel项目的性能优化众所周知Laravel框架的功能很强大,它里面的东西也很多,即便如此它仍然是一个优秀的框架,但在生产环境下要做好优化提升网站的打开速度。所以,接下来的这篇文章给大家分享了几个Laravel网站性能优化的技巧。优化一:关闭debug打开.env文件,把debug设置为false。APP_ENV=localAPP_DEBUG=falseAPP_KEY=base64:sT/aTFeaE13…

    2022年5月13日
    47
  • sublime激活码【注册码】

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

    2022年3月18日
    63
  • 汉诺塔问题java代码_汉诺塔难吗

    汉诺塔问题java代码_汉诺塔难吗先用一般方法实现汉罗塔方法:先确定三个”石柱”ABC。n代表A柱起始圆盘数量主函数:结合栈来实现汉罗塔。因为栈先进后出的特点很适合汉罗塔。其实和上述方法本质一样,只不过添加了栈的特性这里定的栈最大容量为7,可以根据实际情况更改栈的构造:栈的相应方法如下(入栈,出栈,遍历栈)结合栈实现汉罗塔主函数:结果:…

    2022年10月12日
    2

发表回复

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

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