React-admin dynamic resource下教室选课用户列表自定义存储实现问询

1. 注册自定义选课资源 #

首先在React-admin入口的<Admin>组件中新增自定义选课资源，无需配置默认页面，后续单独绑定自定义路由即可：

<Admin dataProvider={dataProvider}>
  {/* 原有三类资源配置保持不变 */}
  <Resource name="users" list={UserList} create={UserCreate} edit={UserEdit} />
  <Resource name="instructors" list={InstructorList} create={InstructorCreate} edit={InstructorEdit} />
  <Resource name="classrooms" list={ClassroomList} create={ClassroomCreate} edit={ClassroomEdit} />
  {/* 新增自定义选课资源 */}
  <Resource name="classroom_enrollments" />
</Admin>

可根据业务需求自定义资源名，此处以classroom_enrollments为例

2. 给教室列表条目加跳转逻辑 #

在教室列表的Datagrid组件中配置rowClick属性，点击条目时跳转至选课列表页，同时携带当前教室ID作为过滤参数：

export const ClassroomList = () => (
  <List>
    <Datagrid rowClick={(id) => `/classroom_enrollments?classroom_id=${id}`}>
      {/* 原有教室列表字段保持不变 */}
      <TextField source="id" />
      <TextField source="name" />
      <NumberField source="capacity" />
      <ReferenceField source="instructor_id" reference="instructors">
        <TextField source="name" />
      </ReferenceField>
    </Datagrid>
  </List>
)

3. 开发选课用户列表页面 #

新建选课列表组件，从URL中读取教室ID作为列表过滤条件，同时自定义顶部操作栏添加要求的两个按钮：

import { List, Datagrid, TextField, EmailField, TopToolbar, CreateButton, ReferenceField, DateField } from 'react-admin'
import { useLocation } from 'react-router-dom'

// 自定义顶部操作栏
const EnrollmentListActions = () => {
  const location = useLocation()
  const classroomId = new URLSearchParams(location.search).get('classroom_id')
  return (
    <TopToolbar>
      {/* 添加学生按钮，跳转时携带当前教室ID */}
      <CreateButton 
        resource="classroom_enrollments" 
        label="AddStudents"
        state={{ classroom_id: classroomId }}
      />
      {/* 新增教室按钮，直接跳转原有教室创建页 */}
      <CreateButton resource="classrooms" label="AddClassroom" />
    </TopToolbar>
  )
}

export const ClassroomEnrollmentList = () => {
  const location = useLocation()
  const classroomId = new URLSearchParams(location.search).get('classroom_id')
  
  return (
    <List 
      resource="classroom_enrollments"
      filter={{ classroom_id: classroomId }}
      actions={<EnrollmentListActions />}
      title={`教室${classroomId}已报名用户`}
    >
      <Datagrid>
        <TextField source="id" />
        <ReferenceField source="user_id" reference="users">
          <TextField source="name" />
        </ReferenceField>
        <ReferenceField source="user_id" reference="users">
          <EmailField source="email" />
        </ReferenceField>
        <DateField source="enrolled_at" />
      </Datagrid>
    </List>
  )
}

列表字段可根据业务需求自行调整，过滤参数classroom_id需要和后端接口约定的字段名保持一致

4. 配置自定义路由 #

在<Admin>组件中添加customRoutes配置，把选课列表路径和你开发的组件绑定：

import { Route } from 'react-router-dom'
import { ClassroomEnrollmentList } from './ClassroomEnrollmentList'

<Admin 
  dataProvider={dataProvider}
  customRoutes={[
    <Route path="/classroom_enrollments" element={<ClassroomEnrollmentList />} />
  ]}
>
  {/* 原有资源配置保持不变 */}
</Admin>

5. 适配数据接口 #

在你的dataProvider中适配classroom_enrollments资源的对应请求：

• getList方法需要识别classroom_id过滤参数，返回对应教室的报名用户列表
• 如果需要实现AddStudents功能，补充create方法的逻辑即可，创建时会自动携带路由传递的classroom_id参数

内容的提问来源于stack exchange，提问作者sourav ojha