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

本文链接：https://blog.youkuaiyun.com/gitblog_00022/article/details/148360876

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的<List/>组件作为页面容器
数据表格：使用Material UI的<DataGrid/>显示数据
操作按钮：如编辑、查看等操作按钮

核心组件详解

1. List组件

<List/>是Refine提供的高级组件，它提供了：

页面标题显示
创建新记录的按钮
页面布局结构
与其他Refine组件的无缝集成

2. DataGrid组件

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
通过单个请求获取所有关联分类的完整数据
返回分类数据供我们使用

实现列表页面

完整的列表页面实现大致如下：

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

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

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

  // 定义表格列
  const columns = React.useMemo<GridColDef[]>(
    () => [
      { field: "id", headerName: "ID", type: "number" },
      { field: "title", headerName: "Title", flex: 1 },
      {
        field: "category",
        headerName: "Category",
        valueGetter: ({ row }) => {
          const category = categoryData?.data.find(
            (item) => item.id === row.category.id
          );
          return category?.title;
        },
        flex: 1,
      },
      {
        field: "actions",
        headerName: "Actions",
        renderCell: function render({ row }) {
          return (
            <>
              <EditButton hideText recordItemId={row.id} />
              <ShowButton hideText recordItemId={row.id} />
            </>
          );
        },
      },
    ],
    [categoryData]
  );

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

将列表页面添加到应用

最后，我们需要在应用的主文件中注册这个列表页面：

import { BlogPostList } from "pages/blog-posts/list";

// 在resources配置中使用
resources={[
  {
    name: "blog_posts",
    list: BlogPostList,
    // 其他操作配置...
  }
]}