React路由跳转时通过传参进行动态渲染的方法

最近在react项目中，需要根据点击元素的不同，而切换同一个路由地址下的一个Tab选项卡的不同区域中，我采用的是通过在路由跳转时候顺带传值的方法，通过值的不同而切换到选项卡的不同区域中。
首先是pageA页面中在需要调转的不同元素中绑定上相应的方法（设置路由跳转到pageB页面，并且给selectd传入不同的参数值Tab_a、Tab_b）

    onGotoTab_ a= () => {this.props.history.push("/pageB",{selected: Tab_a})}onGotoTab_b= () => {this.props.history.push("/pageB",{selected: Tab_b})}

然后在所需的组件中，在组件未渲染时，在生命周期componentWillMount (组件将要挂载)中进行state状态的改变，从而将pageA页面通过location.state传递了参数给B页面

componentWillMount(){if(this.props.location.state){this.setState({selected: ·this.props.location.state.selected})}
}

然后就可以在渲染时通过调用this.state.selected 从而进行动态渲染了,而this.state.selected最好先设置一个默认值，因为location.state在其他路由跳转过去的时候，是没有值的

React路由跳转时通过传参进行动态渲染的方法相关推荐

React使用路由跳转时控制台报Cannot update during an existing state transition (such as within `render`)错误
React使用路由跳转时控制台报Cannot update during an existing state transition (such as within render).Render met ...
路由跳转时的页面状态保存
前言我们在开发网页时,经常会遇到一种情况--在一个页面对页面初始状态进行了修改(如已请求到的数据.表单数据.滚动高度等等),跳转到另外一个页面之后再返回到原页面(路由回退),原页面需要保持原先的状态 ...
ElementUI使用el-tabs进行路由跳转时动态修改页签的标题
目录需求描述分析及尝试效果实现需求描述最近在做使用若依的管理系统框架做项目,在做前端的一个需求的时候发现,在路由跳转时,发现的title只能设置为常量,在进行了不少的搜索依旧没找到如何将ti ...
python 函数的调用的时候参数的传递_python定义函数时的参数调用函数时的传参...
一.定义函数: 1.位置参数:直接定义参数 2.默认参数(或者关键字参数):参数名 = "默认值" 3.位置参数必须在默认参数之前二.调用函数: 1.按位置传,直接写参数的值 2 ...
微信小程序页面跳转，url传参参数丢失问题
微信小程序页面跳转,url传参参数丢失问题 // pages/order/purchase/index.js// 跳转到采购订单详情toPurchaseOrderDetail(e) {// conso ...
微信小程序跳转tabBar页面传参
微信小程序底部tabBar一般通过wx.switchTab进行跳转,但该api无法传参,如何解决传参问题? 网上查了一下,一般都是通过app.globalData全局变量进行传参的,但这种方法在需要配 ...
vue 项目路由跳转时，ie报错缺少')'
vue 项目路由跳转时,ie报错缺少')' 报错信息解决办法报错信息 vue项目中使用了vue-echarts,项目启动后,在chrome上路由跳转没问题,但是在ie的控制台报"缺少 ...
Vue路由跳转时导航栏更新
Vue路由跳转时导航栏更新问题描述在调用函数中跳转路由,但是侧边栏没有更新激活的高亮状态排查查看路由跳转后,侧边栏中active_index的session储存正常由于侧边栏由组件引入,所以 ...
vue 跳转外部链接传参整个路由，获取路由上的参数
一.传参路由要先编码encodeURIComponent 二.传到下个页面要先解码decodeURIComponent 三.获取路由上的参数 getUrlKey(keyname, url) {retu ...

React路由跳转时通过传参进行动态渲染的方法

React路由跳转时通过传参进行动态渲染的方法相关推荐

最新文章

热门文章