Refine项目教程：使用Material UI手动创建列表页面-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00983/article/details/148360652

Refine项目教程：使用Material UI手动创建列表页面

refine 一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架，具有无与伦比的灵活性。项目地址: https://gitcode.com/gh_mirrors/re/refine

前言

在Refine项目中，我们经常需要为资源创建CRUD（增删改查）页面。本教程将详细介绍如何使用Material UI手动创建列表页面，而不是依赖自动生成的代码。通过手动创建，我们可以获得更大的灵活性和控制权。

准备工作

在开始之前，请确保你已经：

完成了Refine项目的基本配置
了解基本的React和TypeScript知识
熟悉Material UI组件库

创建列表页面文件

首先，我们需要在项目中创建列表页面文件：

在src/pages/blog-posts目录下创建list.tsx文件
这个文件将包含我们博客文章资源的列表展示逻辑

理解列表页面结构

一个典型的Refine列表页面包含以下几个关键部分：

1. List组件

<List/>组件是Refine提供的核心组件，它负责：

显示页面标题
提供创建新记录的按钮
包裹实际的数据展示组件

2. 数据表格组件

Material UI提供了强大的<DataGrid/>组件用于展示表格数据，它具有以下特点：

支持分页
支持排序
支持筛选
可自定义列渲染

3. useDataGrid钩子

Refine提供的useDataGrid钩子简化了数据表格的管理：

const { dataGridProps } = useDataGrid({
  resource: "blog_posts",
});

这个钩子会自动处理：

数据获取
分页逻辑
排序逻辑
筛选逻辑

处理关联数据

在实际应用中，我们经常需要处理关联数据。例如，博客文章可能关联到分类：

const { data: categoryData } = useMany({
  resource: "categories",
  ids: data?.data?.map((item) => item.category.id) || [],
});

这段代码会：

从博客文章数据中提取所有分类ID
批量获取这些分类的详细信息
将结果存储在categoryData中

完整实现步骤

创建基本框架：首先设置List组件和数据表格的基本结构
配置列定义：定义表格中要显示的列及其属性
处理关联数据：使用useMany钩子获取关联的分类数据
添加操作按钮：为每条记录添加查看和编辑按钮
自定义渲染：根据需要自定义某些列的渲染方式

示例代码解析

以下是列表页面的核心代码结构：

import { List, useDataGrid } from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { useMany } from "@refinedev/core";

export const BlogPostList = () => {
  const { dataGridProps } = useDataGrid();
  
  // 获取关联的分类数据
  const { data: categoryData } = useMany({
    resource: "categories",
    ids: dataGridProps.rows?.map((item) => item.category.id) || [],
  });

  // 定义表格列
  const columns = React.useMemo<GridColDef[]>(
    () => [
      // 各列定义...
    ],
    [categoryData]
  );

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};