react进入路由前获取数据_react之传递数据的几种方式props传值、路由传值、状态提升、redux、context..._赵糖醋的博客-程序员宅基地

技术标签: react进入路由前获取数据  

父组件:

import { Route, Switch, Redirect } from 'react-router-dom'

class App extends Component {

render() {

return (

);

}

}

export default App;

子组件:

{this.props.match.params.shopName}

{this.props.match.params.shopNote}篇笔记

关注

方法二:

var data = {id:0,name:'lili',age:16};

data=JSON.stringify(data);var path = `/user/${data}`;用户

var data = this.props.location.query;var {id,name,age} = data;

3、状态提升:其原理是两个或者多个组件需要共享的数据放在他们公共的祖先身上,通过props实现共享

L:父组件为

子组件为

在父组件中调用子组件:

以此类推。

4、redux

已我自己写的一个小demo为例子:

大概项目大概如第二张图,具体应用体现在goodDetail文件夹内

新建一个store文件夹,做一个数据处理的汇总

store/redecers.js

store/redecers.js

import { combineReducers } from'redux'import shop from'pages/shop/reducer'import car from'pages/goodDetail/reducer'exportdefaultcombineReducers({

shop,

car

})

store/index.js

import { createStore, applyMiddleware } from 'redux'import thunk from'redux-thunk'import reducers from'./reducers'const store=createStore(reducers, applyMiddleware(thunk))

exportdefault store

goodDetail/actionType.js

export const GET_CAR_DATA = 'car/get_car_data'

goodDetail/actionCreator.js

import { GET_CAR_DATA } from './actionType'export const loadCarDataSync= (goods) =>{//console.log(goods)

return{

type: GET_CAR_DATA,

goods:goods

}

}

export const loadCarDataAsync= (dispatch,obj) =>{//console.log(1)

//console.log(obj)

return () =>{

dispatch(loadCarDataSync(obj))

}

}

goodDetail/reducer.js(处理数据)

import {GET_CAR_DATA} from './actionType'const defaultState={

goods:[{

shopName:"豌豆公主海外美妆集合店",

he:[

{ image:"https://img.xiaohongshu.com/items/[email protected]_320w_320h_1e_1c_0i_90Q_1x_2o.jpg",

introduce:"clé de Peau Beauté肌肤之钥 沁肌紧肤水磨精华液 170ml",

kuSave:296161,

num:4,

price:609}

]

}

]

}

exportdefault (state=defaultState, action) =>{if (action.type ===GET_CAR_DATA) {if(!!state.goods){

const obj= state.goods.find(v => v.shopName ===action.goods.shopName )if(!!obj){

const same= obj.he.find(i => i.introduce === action.goods.he[0].introduce )

console.log(obj)if(!!same){

same.num++;

}else{

obj.he.push(...action.goods.he)

}return{

goods: [...state.goods]

}

}else{return{

goods: [...state.goods,action.goods]

}

}

}else{return{

goods: [action.goods]

}

}

}returnstate

}

整个项目最外面的index.html中引入

import store from './store'

在goodDetail/goodDetai.js中

import { connect } from 'react-redux'import {

Link,

withRouter

} from'react-router-dom'import { loadCarDataAsync } from'./actionCreator'const mapState= (state) =>{//console.log(state)

return{

goods: state.car.goods

}

}

const mapDispatch= (dispatch) =>{return{

loadCategories (obj) {//console.log(obj)

dispatch(loadCarDataAsync(dispatch,obj))

}

}

}

中间代码省略,在你需要的地方调用this.props.loadCategories(

{

shopName:this.state.good.vendor_name,

he:[{

image:this.state.good.image,

introduce:this.state.good.desc,

price:this.state.good.discount_price,

kuSave:this.state.good.fav_info.fav_count,

num:Number(this.refs.goodNum.value)

}]

}

) (参数可传可不传,不传的话,其余对应的地方记得修改)

exportdefault withRouter(connect(mapState, mapDispatch)(GoodDetail))

5、context

不合适修改数据

更适合共享数据

getChildContext()

祖先组件:

1>import PropsTypes from 'prop-types'

2>static childCOntextTypes={

XX:PropsTypes.string

}

3>getChildContext(){

return {XX:xx}

}

4>引入一个子组件

子组件接收:

this.context.XX

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33411550/article/details/111981116

智能推荐

前端知识点回顾-(2021-05-26)_水势年华的博客-程序员宅基地_清除浏览器缓存css

目录1、浏览器篇1.1、整理的内容慢慢更新,回归一下之前的知识点,免得遗忘了1、浏览器篇1.1、

圣诞节python_教你用Python画了一棵圣诞树!圣诞节给女朋友制作个小惊喜_weixin_39710966的博客-程序员宅基地

如何用Python画一个圣诞树呢?最简单:height = 5​stars = 1for i in range(height):print((' ' * (height - i)) + ('*' * stars))stars += 2print((' ' * height) + '|')效果:哈哈哈哈,总有一种骗了大家的感觉。其实本文是想介绍Turtle库来画圣诞树。import turtle​s...

数据分析总是做不好?你可能需要这个思维框架_华·伊文斯的博客-程序员宅基地

人人挂在嘴边的数据分析,到底包含哪些方面?学好 Python 真的就能做好数据分析吗?数据分析,拆开来看其实是几个方面:工具、理论、业务工具,指的是我们从事数据分析所使用的具体工具,如 SQL、Excel、Python、R、SAS等;理论,指的是我们从事数据分析时所依赖的理论基础,如概率论、统计学、机器学习及相关的建模和分析框架;业务,指的是数据分析落地的具体场景,输入和输出以及要解决的具体问题。...

jmeter基本操作2_weixin_50537320的博客-程序员宅基地

Jmeter脚本录制1.1. 什么是脚本录制在进行测试的时候,可能有好多脚本或者界面需要操作测试,并且有些测试链接需要重复多线程高并发进行测试,我们一般会针对这一些操作,进行一个脚本录制,录制好之后,之后测试就可以在这个基础上进行测试。1.2. Jemeter脚本录制方式BadBoy脚本录制使用Jmeter自带的代理服务器进行脚本录制BadBoy脚本录制2.1. 打开badboy软件2.1.1 badboy脚本录制点击录制按钮进行脚本录制,完成打开搜狗搜索,搜索jmeter操作,然后停止,

python处理异常的机制_python异常和文件处理机制详解_小旅兔的博客-程序员宅基地

本文实例讲述了python异常和文件处理机制。分享给大家供大家参考,具体如下:1 异常处理Python的异常用tryexceptfinally来处理. 并且except后还可以跟 else .引发异常用 raise如果抛出的异常没有被处理. 在Python IDE中是显示一些红色的信息. 在真正的Python程序运行时. 会导致程序终止.在以前我们已经见到过一下几种异常:在 Dictionary ...

Dubbo的架构与调用流程详解_沸羊羊_的博客-程序员宅基地_dubbo 单体应用

前言本文主要对 Dubbo 的简介,架构等宏观方面对 Dubbo 进行介绍。应用架构的演进单体应用早期的应用架构是大多是单体应用,随着互联网的快速发展以及数据量的急剧增长和业务的复杂度,很多企业会对应用进行垂直拆分,即把业务上没有关联的系统独立拆分出来,形成独立对外提供服务的系统。此时,服务之间完全独立,无法进行远程调用,很多基础代码不能复用,需要复制使用。为了解决这些存在的问题,衍生出了分布式应用。分布式应用SOA架构为了解决单体应用出现的问题,面向服务的架构(SOA)出现了,SOA 将单一

随便推点

unity通过服务器同步位置,在客户端和服务器,Unity3D之间同步ParticleSystem_杜不知道的博客-程序员宅基地

好的,因此您的第二个engineSpeedPS可以在网络代码中忽略-只需使用isClient或类似功能在客户端本地播放即可。它不需要通过网络。我将只讨论设置另一个您想在任何地方播放的粒子效果。它在Client对象上,这意味着该对象由客户端控制。客户端应告诉服务器该播放粒子了,然后服务器告诉所有其他已连接的客户端。粒子可能不应该在清醒状态下播放,因为每个人都会在不同的时间醒来。因此,您应该拥有自己的...

html验证座机号码_html5表单pattern属性配合正则验证电话和手机号码_伊噜咔的博客-程序员宅基地

正则表达式(包括手机号码,3-4位区号,7-8位直播号码,1-4位分机号)正则解析“^\d+$”  //非负整数(正整数 + 0)“^[0-9]*[1-9][0-9]*$”  //正整数“^((-\d+)|(0+))$”  //非正整数(负整数 + 0)“^-[0-9]*[1-9][0-9]*$”  //负整数“^-?\d+$”    //整数“^\d+(\.\d+)?$”  //非负浮点数(正浮...

virilog 模块之间的层次关系_管理信息系统六七章练习题复习课程_weixin_39847244的博客-程序员宅基地

第六章练习题一、选择题1.信息系统设计是系统开发的重要阶段,进行系统设计的主要依据应是()。A、可行性研究报告B系统分析报告C、系统调查报告D、系统规划报告2.下面不属于系统设计的方法是()。A、结构化设计B、生命周期法C、Jackson方法D、Parnas方法3.在系统总体结构设计时,应采纳什么样的方法()。A、程序设计B、结构化设计C、由里向外D、自底向上4.结构化设计的基本思想是()。A、模...

c语言中数字自动应答器,关于应答器系统.doc_看你真有意思的博客-程序员宅基地

应答器系统简介文档目的本文根据《软件结构设计规范》制定TDY型应答器传输模块(TDY-BTM)的软件模块详细设计,包括模块功能介绍,全局变量定义及介绍和函数详细设计等。从系统功能和与其他设备交互的角度出发,针对软件框架结构设计编写详模块计规范,作为软件测试执行的依据。范围本文档覆盖如下模块的详细设计:文件名分类模块功能说明main.c通信模块总调度框架TGMQ_A.c安全模块A路报文缓冲区TGMQ...

android uboot log,RK3288 Android 8.1系统uboot logo过渡到kernel logo会花一下_左手plus的博客-程序员宅基地

在调试RK3288 Android 8.1系统遇到一个问题:开机启动uboot logo过渡到kernel log的过程中会花掉直到没有显示,再出现kernel logo。分析:打印串口log时发现,uboot阶段显示一切正常,进入kernel以后就开始花掉了然后变成没有显示了,感觉像是慢慢掉电了一样,再继续查看log发现如下打印:[ 0.363167] Registered fiq deb...

推荐文章

热门文章

相关标签