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


相关推荐

  • 操作系统课设详细解答

    操作系统课设详细解答操作系统课设详细解答一、题目一实验一Windows进程管理二、实验目的(1)学会使用VC编写基本的Win32ConsolApplication(控制台应用程序)。(2)通过创建进程、观察正在运行的进程和终止进程的程序设计和调试操作,进一步熟悉操作系统的进程概念,理解Windows进程的“一生”。(3)通过阅读和分析实验程序,学习创建进程、观察进程、终止进程以及父子进程……

    2022年6月26日
    28
  • 男生说fb是什么梗_男生聊污是什么意思 男生会对谁聊污

    男生说fb是什么梗_男生聊污是什么意思 男生会对谁聊污男生聊污是在暗示么,肯定啊,经常聊肯定是想要发生些什么,如果能够得到回应肯定就进一步发展了。还有一种情况是为了口嗨,不管是真正的性、还是聊天是聊污,都是为了嗨,最终的目的还是为了上床。一般来讲,女生是不喜欢这样的话题,甚至讲得过份的话会觉得受到侮辱。男生一般不会随便的在女生面前讲起这些话题,讲起来肯定是有目的。费玉清其实也是一种试探,如果两个人能够聊下去,哪怕不发展到床上这种地步,但是也会聊的非常…

    2022年7月25日
    17
  • java web项目中hibernate导入问题解决, AbstractInterceptor

    java web项目中hibernate导入问题解决, AbstractInterceptor解决步骤如下:先说一句:修改后先保存,然后看看错误消失没?只需要导入正确的包properties-&gt;javabuildpath-&gt;Libraries-&gt;AddLibaray-&gt;Myeclipselibrary-&gt;你需要导入的包-&gt;applyimportcom.opensymphony.xwork2.Action;importcom.opensym…

    2022年5月14日
    39
  • potplayer快捷键

    potplayer快捷键potplayer播放器用起来感觉不错,搜集快捷键备用快捷键指令——————————————————–“播放->跳略播放->跳略播放开|关’播放->跳略播放->跳略播放设置…,字幕->字幕同步(帧率)->滞后0.5秒Alt+,…

    2022年5月11日
    100
  • JavaScript常用基础算法「建议收藏」

    JavaScript常用基础算法「建议收藏」一、字符串1.字符串中出现最多次数的字符functionfindMaxDuplicateChar(str){varcnt={},//用来记录所有的字符的出现频次c="";//用来记录最大频次的字符for(vari=0;i<str.length;i++){varci=str[i];if(!cnt[ci]){

    2022年10月5日
    2
  • 行为树

    行为树行为树常被用来实现游戏中的AI。每次执行AI,都会从根节点遍历整个树,父节点执行子节点,子节点执行完后将结果返回父节点。下面是基本的四个节点:1*顺序节点(Sequence):属于组合节点,顺序执行

    2022年8月1日
    7

发表回复

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

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