React 携带多个子组件的参数请求数据

已于 2023-02-08 11:55:30 修改
阅读量381 收藏 2
点赞数
文章标签： 前端 javascript react.js
于 2022-10-18 17:05:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63494932/article/details/127390458
版权
这篇博客介绍了如何在前端实现动态数据交互，特别是通过点击tabs和饼图实现页面数据的切换与下钻效果。当点击饼图时，不仅传递饼图的level字段，还额外传递了tab栏的module_name字段，以便展示下钻页面的详细数据。通过封装饼图组件并接收props参数，使得其他页面可以方便地扩展传参，实现了灵活的数据传递机制。
摘要由CSDN通过智能技术生成

实现的效果图贴这里   然后来记录一下这个芝士～

首先页面是这样  点击tabs栏  页面下边的数据都是会变的(包括饼图)  然后点击饼图的任意一块出来对应的下钻页面   然后下钻页面要带上tab栏的module_name字段和饼图的level字段  作为参数传给后端 来展示下钻页面的详细数据

 

平时这种写法只是把父组件传过来的数据展示一下

今天项目中了一种另外的方式

 

然后再封装的饼图里边接受参数

这个handleShow是因为下钻页面是用这个来请求数据     handleShow后边带的就是接口的params参数

规定数据类型

以上是只带一个参数的写法 也就是开发的时候只写了传饼图参数的方法 今天下午给扩展了一下

方法同上 不过这个我写的 所以记录一下 毕竟这玩意对我这个新手来说还是值的记一下的

 因为下钻页面是点击饼图触发的 而且就是上边说的 这个data是传饼图的参数的  所以用一个新的subParam传  而且保不齐后边还会再多传其他的参数   所以这个subParam要是一个对象  所以这里是双的大括号 {{ }}    module_name就是父组件传过来的tab栏要传的参数 

然后封装的饼图接受一下prop值

后边其他页面不管需要传多少参数 只要传在subParam里面就可以了 其他东西都不用改 

比如另一个页面用到的

OK这样就可以了 

Leslie21.
关注
React 跳转路由传参, 页面请求两次
Tessa_zzl的博客
09-22 1638
问题: 路由跳转时, 页面发出了两次一模一样的网络请求, 但是当前页刷新时, 仅发出一次请求. 问题条件说明: 在跳转路由上带参数, 且参数中包含中文 问题分析: 浏览器对中文参数进行转码导致组件加载两次 解决方案: 在传递参数时, 对参数用encodeURI进行转码, 接收参数时用decodeURI解码 // 获取props.location.search中的参数值 const getQuery = (search) => { let obj = {}; if (search) {
react多个网络请求_React 相关
weixin_39968823的博客
12-29 927
React 生命周期函数setState是同步的还是异步的？setState使用需要注意哪些点? setState 之后发生了什么？为什么多次setState只一次生效?React如何实现自己的事件机制？为何React事件要自己绑定this？原生事件和React事件的区别？React的合成事件是什么？React和原生事件的执行顺序是什么？可以混用吗？虚拟Dom是什么?类组件(Class compo...
react组件传参(组件通讯方式)
Anony_me的博客
05-11 1602
思路:利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。思路:利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。3.子组件中通过 props 接收父组件中传递的数据。1.父组件提供一个回调函数(用于接收数据)1.父组件提供一个回调函数(用于接收数据)2.将该函数作为属性的值，传递给子组件。2.将该函数作为属性的值，传递给子组件。1，父组件提供要传递的state数据。3.子组件通过props调用回调函数。3.子组件通过props调用回调函数。
react笔记 请求数据
u013470619的博客
09-11 250
React与其他框架一样 可以用多种方式请求数据。 Axios fetch-jsonp fetch 均可以再react中使用 使用this时注意this指向 下面是fetch-jsonp范例 解决跨域 第一步安装 npm install fetch-jsonp --save import fetch-jsonp from "fecth-jsonp ...
解决react中aixos请求头携带token跨域请求拒绝
jasend的博客
03-19 515
【代码】解决react中aixos请求头携带token跨域请求拒绝。
React路由 - 路由参数、withRouter组件、Router hooks、路由组件传参、Switch组件、Redirect重定向组件、动态路由
此鱼非闲鱼也的博客
07-15 4711
说动态路由之前，先看看路由参数都有哪些？ 1、路由参数 1-1、history 历史记录及路由给我们的一些操作 路由是根据历史记录跳转视图 history对象中提供了很多方法，便于用户再浏览历史记录中跳转。 go() 方法可以回到历史记录中的某一页面， 通过与当前页面相对位置来标志 。 当前页面的相对位置标志为0。go()方法中，传入一个参数，这个参数是一个整数， 即在 history 记录中向前或者后退多少步。 history.goBack()方法可以回到历史记录中的上一个 URL。 调用该方法的效果等价
react
最新发布
Jasmin博客
05-27 1164
面试
十八、react拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结
快乐de馒头
08-20 337
对象式的setState是函数式的setState的简写方式【语法糖】使用原则如果新状态不依赖于原状态【使用对象方式】如果新状态依赖于原状态 【使用函数方式】如果需要在setState()执行后，获取最新的状态数据，可以在第二个callback函数中读取到异步更新的最新值父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）
react笔记_10react路由
qq_43260366的博客
12-22 1211
在注册路由时如下：可能有两个甚至多个的路由注册,通过 下面代码 注册路由 当path变为/home时 路由出口的位置展示哪个组件-- Home组件orTest组件or两个都展示？以上是注册的几个路由，但是一进入页面时，匹配不到任何的路由，此时若是我们想进入页面(url为空)时默认展示home组件的内容，可以使用路由重定向。在App.vue(跟组件)注册了 Home路由和About路由，在Home组件注册了 Sun1和Sun2 两个子路由。以下就注册了一个 Home 组件 ，组件路径为/home。
React 基础
qq_34261347的博客
08-24 456
初识React 步骤一：添加一个DOM容器到HTML <div id="app"></div> 步骤二：添加Script标签 // 加载 React <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.d.
【数据可视化】基于React使用antv/L7绘制中国地图钻取
椰卤工程师的个人博客
12-30 2434
L7 空间数据可视分析 蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。 代码实现 使用 import { DrillDownLayer } from '@antv/l7-district'; DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下钻的交互，默认点击当前图层(click)向下钻取，双击非地图区域(undblclick)向上钻取。你可以更改默认交互的的触发事件。通过也可以更改默认的交互行为。 map.tsx i
eCharts增加图例（legend）的点击事件--echarts-for-react
x先生的博客
04-20 1万+
1. 功能需求： 用户点击图例，进入下钻页面。 2. 背景 使用echarts-for-react开发的图表，echarts的点击事件不能应用与图例，点击图例会触发legendselectchanged事件。图例选择与非选中状态会直接影响到图表的展示效果，非选中状态图例对应的内容不会再图表内展示。当我点击图例时，页面跳转至下钻页面。 3. 解决思路 需要保证点击图例时，页面跳转至下钻页面，但是被点...
React+fetch 发送post请求 处理请求头参数配置
weixin_45966674的博客
10-21 4059
可以看到 我们body中传的参数 是字符串 不能用对象 那我们用json转字符串的方法处理一下。可以看到 我们的接口给我们 报500错误了 说我们的参数不是json 我们去看一下参数。接口地址和token我都是改过的 抱歉 这个无法提供给你们 你们需要自己去寻找资源。我们接口的数据也正常的输出在了控制台上 没有任何问题。这就是一个基本的结构 例如我们这样写。然后我们来看 pust基本语法。接口返回成功 我们看一下控制台。这是我们传的就是一个json了。然后再去查看我们的参数。
React中实现tab切换
Debug的博客
07-15 2309
代码比较简单，并不复杂 import React, { Component } from "react"; class Taball extends Component { constructor(props) { super(props); this.state = { current: 1, }; } handleTab(index) { this.setState({ current: index, }); } cl
React多个组件的性能优化
AnitaSun的博客
06-27 297
引入 多个React组件中，React组件也要考虑三个阶段：装载阶段、更新阶段和卸载阶段。 装载阶段：从这个React组件往下的所有子组件，都要经历一遍React组件的装载生命周期，因为这部分的工作没有什么可以省略的。 卸载阶段：只有一个生命周期函数componentWillUnmount，这个函数做的事情只是清理componentDidMount添加的事件处理监听等收尾工作，也没有什么可优化的空间。 React的调和(Reconciliation)过程 调和：React在更新阶段很巧妙地对比原有的V
前端:react(柒):react 多个组件共享state
hyd19931002的博客
04-24 2150
//柒 react 多个组件共享state 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。 const scaleNames = { c: 'Celsius', f: 'Fahrenheit' }; function toCelsius(fahrenheit) { return (fahrenheit - 32...
react 同一页面多次引入同一组件，传参显示
WGTkris的博客
05-24 1571
react 同一页面多次引入同一组件，传参显示
react实现页面多个模块的切换
m0_57479235的博客
07-23 1493
前言 这是做的一个多模块切换的一个案例，也是第一会这样大量的使用表单，大概有7，8个模块，这里用其中的一个模块来做展示 以下三张图片对应的就是三个模块了 这是第一个展示面 这是第二个编辑页 这是呈现数据的页面 实现过程 1、每一个模块就是一个组件 <script> // 这里定义一个默认值，作为第一个显示的模块 state={cls='tj'} </script> <div className="module1"> <div className=`m
React-router - 如何在url中带参数？在url中带参数的几种方法
热门推荐
zrq1210的博客
10-20 2万+
方法一：/myurl?id=1&name=chris 通过location.search 基本方法 1.react-route配置: const route = { path: '/myurl', component: myUrl, }; <Route path={route.path} component={route.component} /> 2.跳转url时携带参数的方法： const id = 1; const name = 'chris'; this.pr
React组件内部通信：数据展示与事件处理
本文主要探讨了React框架中组件内部的数据传递方法，强调了处理数据在前端开发中的重要性，并对比了Angular和Vue的数据绑定特性。文章指出，React的数据传递主要涉及组件内部的数据展示和事件处理。 在React中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值