react进入路由前获取数据_react之传递数据的几种方式props传值、路由传值、状态提升、redux、context...
父组件:
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/4d9747c4f9c03b7c2eafc4d066061968@_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
react进入路由前获取数据_react之传递数据的几种方式props传值、路由传值、状态提升、redux、context...相关推荐
- 批量插入数据库语句java_java相关:MyBatis批量插入数据到Oracle数据库中的两种方式(实例代码)...
java相关:MyBatis批量插入数据到Oracle数据库中的两种方式(实例代码) 发布于 2020-7-22| 复制链接 本文通过实例代码给大家分享了MyBatis批量插入数据到Oracle数据库 ...
- 当前京东数据平台用到spark 的五种方式
当前京东数据平台用到spark 的五种方式 1.spark sql 数据从Hive 同步到ES 用python包装命令, 使用spark-submit 提交 ,run_shell_cmd(spar ...
- Excel中数据透视表数据源更新的三种方式
Excel中数据透视表数据源更新的三种方式 1.在原有的基础上重新选择数据源 2.变数据源为表格形式,在创建一个透视表,之后如果添加的数据,选中透视表右键刷新即可 3.利用更新过的数据源再重新创建一个 ...
- 传感器信号 如何发送到服务器,传感器采集到的数据通过无线传输至监控服务器的四种方式...
传感器采集到的数据通过无线传输至监控服务器的四种方式 [复制链接] 目前,工业物联网传感器数据采集无线传输至监控服务器比较常用的通讯解决方案主要有GPRS/4G,433MHz和2.4GHz等三种,而以 ...
- react --- 隔代传递参数的三种方式
组件跨层级通信 - Context 上下文提供一种不需要每层设置props就能跨多级组件传递数据的方式 方式1 Provider提供值 Consumer来消费传递的值 import React fro ...
- Nodejs express 获取url参数,post参数的三种方式
Js代码 : express获取参数有三种方法:官网实例: Checks route params (req.params), ex: /user/:id Checks query string p ...
- 数据导入HBase最常用的三种方式及实践分析
要使用Hadoop,数据合并至关重要,HBase应用甚广.一般而言,需要针对不同情景模式将现有的各种类型的数据库或数据文件中的数据转入至HBase中. 常见方式为:1.使用HBase的API中的Put ...
- Android底层隐私数据,Android Intent传递数据底层分析详细介绍_Android_脚本之家
Android Intent传递数据底层分析详细介绍 我们知道在Activity切换时,如果需要向下一个ActivityB传递数据,可以借助Intent对象的putExtra方法. 但是不知各位有没 ...
- SparkSQL读取hive中的数据,行转列的两种方式【行转列专用函数,UDAF】
先给数据: vi employees 1,George,nan 2,honey,nv 3,georgedage,nan 4,kangkang,nv 上传数据: hdfs dfs -mkdir /sec ...
最新文章
- 【SSH网上商城项目实战17】购物车基本功能的实现
- DISTINCT删除重复数据
- 查看历史操作记录(.bash_history)、修改文件时间
- 难过的要命。。。。。。
- activemq消息持久化_ActiveMQ 5.x中的消息持久性
- C语言 文件读写 fputs 函数 - C语言零基础入门教程
- mysql5.6.24安装perl,linux下perl操作MySQL数据库(需要安装DBI)
- 诊所系统php,诊所管理系统
- 怎么使用starwind部署iscsi_服务器配置我该怎么选
- 重定向telnet方法
- C语言开辟空间和C++ 开辟空间
- 《地球概论》(第3版)笔记 第二章 地球的宇宙环境
- Android本地数据存储:Shared Preferences安全风险浅析
- 如何使用OpenSSL工具生成根证书与应用证书
- PyCenterNetDetector is not in the models registry
- 基于JAVA糖果销售管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
- 2022最新酒桌小游戏喝酒小程序源码_带流量主
- cocos creator 使用 android studio 接入oppo广告,广点通广告
- 解决SpringMvc框架中提示的“Required request body is missing”异常。
- FBX直接导入Unity材质丢失为白模
热门文章
- hadoop(八) - hbase集群环境搭建
- Spring--quartz中cronExpression配置说明
- 前端-【学习心得】-事件委托方法
- [转载]CSS 创作指南(Beta)(css规范)
- -[ASIDataCompressor compressBytes:length:error:shouldFinish:] in ASIDataCompressor.o
- solr返回的字段带有中括号问题
- 关于Arduino 步进电机Stepper库的一些想法
- 系统架构师学习笔记_第四章(上)_连载
- 如何有效提高你的沟通技巧
- wpf 轮询mysql数据库_WPF非轮询方式实时更新数据库变化SqlDependency