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)
上一篇 2022年5月30日 上午8:46
下一篇 2022年5月30日 上午9:00


相关推荐

  • 解决Ubuntu中Edge浏览器smartUp手势插件导致鼠标右键不灵敏的问题

    解决Ubuntu中Edge浏览器smartUp手势插件导致鼠标右键不灵敏的问题解决Ubuntu中Edge浏览器smartUp手势插件导致鼠标右键不灵敏的问题Edge浏览器正式版、Beta、Dev版本都存在smartUp手势插件导致鼠标右键不灵敏的问题解决方法Edge浏览器正式版、Beta、Dev版本都存在smartUp手势插件导致鼠标右键不灵敏的问题解决方法打开smartUp手势设置,或者直接在浏览器地址栏输入下面的地址extension://elponhbfjjjihgeijofonnflefhcbckp/html/options.html通用选项->Linux

    2022年7月21日
    14
  • 效率倍增,推荐6个好用到爆的Pycharm插件

    效率倍增,推荐6个好用到爆的Pycharm插件相信对于不少的Python程序员们都是用Pycharm作为开发时候的IDE来使用的。今天我来分享几个好用到爆的Pycharm插件,在安装上之后,你的编程效率、工作效率都能够得到极大地提升。喜欢本文点赞、收藏、关注。部分插件技术群朋友分享,在此表示感谢。【文末】提供技术交流群安装方法插件的安装方法一点都不难打开file—settings—plugins,在右侧的文本框中输入想要查看的插件名称,在下方就会罗列出已经安装的相关的插件找到我们所需要的对应插件之后,点击install即可完成下载,然后重

    2022年8月29日
    4
  • 拆解 OpenClaw 自动化架构:从消息到执行的完整链路

    拆解 OpenClaw 自动化架构:从消息到执行的完整链路

    2026年3月15日
    1
  • 解决IDEA中 XML文件屎黄色背景 的方法

    解决IDEA中 XML文件屎黄色背景 的方法介绍如何去除idea中.xml文件显示屎黄色背景的方法。不少资料用的是较旧版本中设置的路径,导致有些朋友来问为啥找不到修改设置的地方,所以在这里用下较新版本的idea作为演示。

    2022年10月10日
    5
  • matlab 读txt数据_数据库文件的读取

    matlab 读txt数据_数据库文件的读取fid=fopen(‘hello.txt’,’w’);%需要改文件名称的地方fprintf(fid,’%f\n’,data);%data:需要导出的数据名称fclose(fid);…

    2025年9月22日
    8
  • Address Sanitizer 用法

    Address Sanitizer 用法AddressSanit ASan 是一个快速的内存错误检测工具 这里说明它的用法 参考资料 AddressSanit github com google sanitizers wiki AddressSanit 简介 AddressSanit ASan 是一个快速的内存错误检测工具 它非常快 只拖慢程序两倍左右 比起 Valgrind 快多了 它包括一个编译器 instrumentat 模块和一个提供 malloc free 替代项的运

    2026年3月18日
    2

发表回复

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

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