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


相关推荐

  • epoch和batchsize设置多大(BatchDataset)

    梯度下降  这是一个在机器学习中用于寻找最佳结果(曲线的最小值)的迭代优化算法。  梯度的含义是斜率或者斜坡的倾斜度。  下降的含义是代价函数的下降。  算法是迭代的,意思是需要多次使用算法获取结果,以得到最优化结果。在数据很庞大的时候(在机器学习中,几乎任何时候都是),我们才需要使用epochs,batchsize,迭代这些术语,在这种情况下,一次性将数据输入计算机是不可能的…

    2022年4月15日
    548
  • python基础编程100例_菜鸟编程python100例

    python基础编程100例_菜鸟编程python100例推荐下我自己建的人工智能Python学习群:[672948930],群里有我整理的一份关于pytorch、python基础,图像处理opencv\自然语言处理、机器学习、数学基础等资源库,想学习人工智能或者转行到高薪资行业的,大学生都非常实用,无任何套路免费提供!还可以扫码加VX领取资料哦!正文开始:1、题目:列表转换为字典。程序源代码:1#!/usr/bin/envpython2#-*-coding:UTF-8-*-34i=[‘a’,’b’]5l..

    2025年5月25日
    0
  • linux无限刷屏代码,linux下如何实现简单刷屏

    linux无限刷屏代码,linux下如何实现简单刷屏今天为了测试我的LCD有没有坏点写了一个简单的刷屏程序,效果还不错,分析给大家。代码如下:#include#include#include#include#include#include#include#includeintmain(intargc,char*argv[]){intfbfd=0;structfb_var_screeninfovinfo;struct…

    2022年5月4日
    152
  • We Make AI-Ops Happen 杭州云栖大会——智能运维专场即将开启

    We Make AI-Ops Happen 杭州云栖大会——智能运维专场即将开启

    2021年6月12日
    148
  • vc 调用dll_调用API

    vc 调用dll_调用APIGoogle公司已经将GoogleCOMAPI开放,这样我们就可以通过开放的API来对GoogleEarth进行操作了,比如控制当前视图的高度、中心经纬度,保存当前图片等等。下面是GoogleCOMAPI的网址:http://earth.google.com/comapi/那么,VC程序员如何使用这些API来控制GoogleEarth呢?下面我们编写一个简单的程序来说明对G

    2022年8月12日
    6
  • layui表单提交参数如何传递_HTML中form表单数据提交方式

    layui表单提交参数如何传递_HTML中form表单数据提交方式&lt;formclass="layui-form"&gt; &lt;divclass="layui-form-item"&gt; &lt;inputtype="text"id="subTitle"name="subTitle"lay-verify="required"class="layui-input"&

    2022年10月6日
    0

发表回复

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

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