美文网首页React Native开发让前端飞前端
this.props 的神奇用法(路由传参)

this.props 的神奇用法(路由传参)

作者: IFu的简书 | 来源:发表于2020-03-28 01:19 被阅读0次

问题描述:

        移动端培训项目,之前大多用GET请求。最近接到一个功能需求,后台给我做了五个POST接口,一瞬间有点凌乱。

        由于所有接口都是POST的请求,每个接口的请求参数大约都有四五个,而且是来自不同接口的返回值以及自定义值。而react的数据向来是存在reducer中的,所以造成了页面一刷新,这些由上一个接口返回过来的,对应请求参数数据就获取不到了。结果当然是“查询不到”啦~

        本文侧重汇总 : ①this.props的用法;②react常用的路由传参方法。

知识一:

        传递数据: this.props.history.push({pathname:'/xxxx',state:{data:data}})

        取数据:     let ltEnrollInfo = this.props.location.state.ltEnrollInfo;

路由传递数据 this.props 数据(上)   this.props 数据(下)

(有时间再细理this.props)

知识二:

    汇总一下常用的三种路由传参方式:

1、params传参(刷新页面后参数不消失,参数会在地址栏显示)

路由传参1

1、params传参(多个动态参数)

路由传参2

2、query传参(刷新页面后参数消失)

路由传参3

3、state传参( 刷新页面后参数不消失,state传的参数是加密的,比query传参好用)

路由传参4

相关文章

  • this.props 的神奇用法(路由传参)

    问题描述: 移动端培训项目,之前大多用GET请求。最近接到一个功能需求,后台给我做了五个POST接口,一瞬间有...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • vue-router

    路由安装 路由配置 路由跳转 路由传参-param使用params传参只能使用name进行引入http://loc...

  • Vue 动态路由

    动态路由 动态路由传参

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • 路由传参

    路由传参

  • 2018-12-25 call,apply,bind

    *this的改变 1 call的用法之一不传参函数 2 apply的用法之一不传参函数 3 call的用法之二传参...

网友评论

    本文标题:this.props 的神奇用法(路由传参)

    本文链接:https://www.haomeiwen.com/subject/wxuquhtx.html