Ant Design Pro父组件向子组件传递参数,并接收子组件传过来的参数

父组件 <ProjectList /> 向子组件 <Test /> 传递一个参数是 data_customURL='www.baidu.com',通过属性onSubmit 绑定receive方法,用于接收子组件<Test /> 传过来的参数

在这里插入图片描述

子组件通过props接收传父组件递过来的参数,可通过 this.props.data_costomURL来得到具体的参数值。

注意:data_costomURL 要与父组件定义的属性名相同

通过绑定submit方法,通过传参的方式,把要传递给父组件的值,先传递给submit方法,再通过this.props.onSubmit(参数) 传递给父组件,父组件通过定义的receive的方法接收传回的值。

注意:onSubmit 要与父组件定义的属性名相同

在这里插入图片描述

### Ant Design Pro 中实现动态路由 在 Ant Design Pro 中,动态路由允许应用程序根据服务器返回的数据自动生成页面结构和导航菜单。这种方式不仅提高了开发效率,还增强了系统的灵活性。 #### 路由配置方式 为了支持动态路由,在 `config.ts` 或者类似的全局配置文件中定义初始静态路由[^1]: ```typescript const routes = [ { path: '/', component: '../layouts/BasicLayout', routes: [], }, ]; ``` 此设置创建了一个基础布局预留了子路径的空间用于后续填充。 #### 获取后台数据接口 通过调用 API 接口获取实际的路由列表。通常情况下,这涉及到向后端发送请求以获得最新的权限信息以及对应的 URL 映射关系[^2]: ```javascript import request from '@/utils/request'; async function fetchRoutes() { const response = await request('/api/routes'); return response.data; } ``` 这段代码展示了如何利用 Axios 库发起 HTTP 请求到指定的服务地址 `/api/routes` 来取得所需的信息。 #### 处理响应将新路由加入现有结构 一旦接收到服务端来的 JSON 数据,则可以对其进行解析处理,将其转换成适合前端使用的格式再注入至应用中的路由表内[^3]: ```javascript function addDynamicRoutes(staticRoutes, dynamicRouteData) { staticRoutes[0].routes = dynamicRouteData.map(item => ({ ...item, key: item.path, })); return staticRoutes; } // 假设这是从API得到的结果 const apiResponse = [ { name: '首页', path: '/home' }, { name: '产品', path: '/product' } ]; addDynamicRoutes(routes, apiResponse); ``` 上述函数接收两个参数——一个是预先设定好的固定部分;另一个是从远程加载下来的可变组件集合。最终两者结合起来形成完整的导航体系。 #### 更新 React Router 配置 最后一步就是把修改后的对象传递react-router-dom 的 Switch 组件作为其 children 属性,从而完成整个流程: ```jsx import { renderRoutes } from 'react-router-config'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; <Router> <Switch>{renderRoutes(routes)}</Switch> </Router> ``` 这样就实现了基于 Ant Design Pro 和 Spring Boot 架构下的前后端分离式的动态路由管理机制。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值