当使用 React 和 Ant Design 开发项目时，连接动态路由和修改 Ant Design 组件中内容是很常见的需求。下面将详细介绍如何实现。
1. 连接动态路由
安装依赖
首先需要安装 react-router-dom 和 react-router-config：
npm install react-router-dom react-router-config
路由配置
假设我们有这样的路由配置：
import { RouteConfig } from 'react-router-config'; export const routes: RouteConfig[] = [ { path: '/', component: Home, exact: true, }, { path: '/users', component: Users, exact: true, }, { path: '/users/:userId', component: UserProfile, exact: true, }, ];
其中，带有参数的路由是 /users/:userId。
访问路由参数
我们可以通过 react-router-dom 中的 useParams() 钩子来访问路由参数。
import React from 'react'; import { useParams } from 'react-router-dom'; const UserProfile = () => { const { userId } = useParams(); return <div>User Profile for user with ID {userId}</div>; };
上面的例子中，可以得到路由参数 userId。
2. 修改 Ant Design 组件中的内容
许多 Ant Design 的组件都会将部分内容暴露出来，以便于在实际使用中进行更改。下面以 Table 为例进行说明。
自定义 render 函数
Table 一般都需要自定义渲染一些内容，这可以通过设置 columns 属性进行实现。
import { Table } from 'antd'; import { ColumnProps } from 'antd/lib/table'; interface User { name: string; age: number; } const columns: ColumnProps<User>[] = [ { title: 'Name', dataIndex: 'name', key: 'name', render: (text: string) => <a>{text}</a>, }, { title: 'Age', dataIndex: 'age', key: 'age', }, ]; const data: User[] = [ { name: 'John Brown', age: 32 }, { name: 'Jim Green', age: 42 }, { name: 'Joe Black', age: 45 }, ]; const UserTable = () => { return <Table columns={columns} dataSource={data} />; };
在 columns 中，我们可以通过设置 render 函数来自定义渲染内容。
样式覆盖
如果 Ant Design 组件在本地样式文件中被定制了，那么开发者可以使用样式覆盖来进行更改。例如，假设已经定义了下面的样式：
.ant-table-pagination .ant-pagination-total-text { color: red; }
我们可以在页面中使用这样的样式：
import { Table } from 'antd'; import { ColumnProps } from 'antd/lib/table'; import './style.css'; interface User { name: string; age: number; } const columns: ColumnProps<User>[] = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, ]; const data: User[] = [ { name: 'John Brown', age: 32 }, { name: 'Jim Green', age: 42 }, { name: 'Joe Black', age: 45 }, ]; const UserTable = () => { return <Table columns={columns} dataSource={data} />; };
这样就能够使用在样式文件中定义的样式去覆盖 antd 组件的样式。
总结
本文首先介绍了如何使用 useParams 钩子访问动态路由参数，然后针对 Ant Design 中 Table 组件的自定义渲染和样式覆盖进行了说明。当然，Ant Design 中的其他组件同样可以采用类似的方式进行微调和定制。在实际开发中，根据需要进行相关修改即可。
