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为单页面跳转页面
  },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139226.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mfc可视化界面_mfc界面开发

    mfc可视化界面_mfc界面开发亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv32.2正式发布!新版本改进的功能区和框架标题命令搜索、带有可选复选框的网格日期选择器、带有标签的功能区滑块等,需要最新版的可以点击这里【BCG下载】BCGControlBarProforMFCv32.2正式版下载RibbonBar1.新的全局变量globalData.m_sizeRibbonCategoryPadding和glo.

  • clover 引导无法扫描 找到windows系统解决办法[通俗易懂]

    目的:为clover添加windows启动项环境:thinkpadX260+CLOVER引导+黑苹果方法: 进入winPE系统  cmd下cd切换到系统盘盘符如C:挂载efi分区为S盘执行bcdbootC:\Windows  /sS:/fuefi/lzh-cn重启即可看到…

  • spss 卡方检验,Logistic回归方法「建议收藏」

    spss 卡方检验,Logistic回归方法「建议收藏」案例:新生儿体重较低影响因素1:影响因素分析,求出哪些自变量对因变量发生概率有影响,并计算各自变量对因变量的比数比;2:作为判别分析方法,来估计各种自变量组合条件下因变量各类别的发生概率,从而对结局进行预测,该模型在结果上等价于判别分析;说明:低出生体重标准:新生儿体重<2500克结果变量为是否娩出低出生体重儿,变量名为low,1=低出生体重,0=非低出生体重;考虑的影响因素…

  • 让引擎不再是你的唯一,对百度再见

    让引擎不再是你的唯一,对百度再见

  • 计算机的储存容量1kb等于多少byte,1M等于多少字节?

    计算机的储存容量1kb等于多少byte,1M等于多少字节?1M等于多少字节?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!1M等于多少字节?不是1M等于多少字节,是1MB等于多少字节。字节(Byte/bait/n.[C])是计算机信息技术用于计量存储容量的一种计量单位,也表示一些计算机编程语言中的数据类型和语言字符。字节用符号“B”表示。MB(全称MByte):计算机中…

  • centos7安装pycharm_pycharm配置环境变量

    centos7安装pycharm_pycharm配置环境变量Centos下pycharm的安装与配置1下载安装pycharm首先在下面的网址下载安装包:https://www.jetbrains.com/pycharm/download/#section=linux然后使用下列指令将安装包放入合适的目录下(本文将安装包放入了/usr/local目录下):cd/home/yue/Downloadsmvpycharm-community-2020.1.tar.gz/usr/local然后进行安装包所在目录,进行解压:tar-zxvfpyc

发表回复

您的电子邮箱地址不会被公开。

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