Refine项目教程：使用Mantine UI添加列表页面-优快云博客

Refine项目教程：使用Mantine UI添加列表页面

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

前言

在Refine项目中，CRUD（创建、读取、更新、删除）功能是构建管理后台的核心部分。本教程将详细介绍如何使用Mantine UI组件库手动创建列表页面，而不是依赖自动生成的代码。通过手动创建，开发者可以获得更大的灵活性和控制权。

准备工作

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

完成了Refine项目的基本配置
安装了必要的依赖包，包括Mantine UI组件库
了解基本的React和TypeScript知识

创建列表页面文件

首先，我们需要在项目中创建列表页面的基础结构：

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

理解列表页面的核心组件

1. List组件

<List/>是Refine提供的高阶组件，它提供了以下功能：

页面标题显示
创建新记录的按钮
布局容器
分页控制

2. Table组件

Mantine的<Table/>组件用于展示数据表格，它提供了：

响应式布局
可定制的样式
排序功能
行选择功能

3. useTable钩子

useTable是Refine提供的强大钩子，它结合了：

数据获取功能
分页管理
排序控制
筛选功能

这个钩子内部使用了TanStack Table v8，提供了丰富的表格功能。

处理关联数据

在实际应用中，数据往往存在关联关系。在我们的例子中，每篇博客文章都关联到一个分类。为了高效地获取这些关联数据，我们可以使用useMany钩子。

useMany钩子的工作原理

首先从主资源（blog_posts）获取数据
提取所有关联ID（这里是分类ID）
通过单个请求批量获取所有关联记录
将关联数据映射到主数据中

这种方法比逐个获取关联数据高效得多，减少了网络请求次数。

实现步骤详解

1. 创建基本列表结构

import { List, useTable } from "@refinedev/mantine";
import { Table } from "@mantine/core";

export const BlogPostList = () => {
  const { getInputProps, ...tableProps } = useTable({
    columns,
    refineCoreProps: {
      metaData: {
        fields: ["id", "title", "content", "category"],
      },
    },
  });

  return (
    <List>
      <Table {...tableProps} striped highlightOnHover>
        {/* 表格内容 */}
      </Table>
    </List>
  );
};

2. 定义表格列

const columns = [
  {
    key: "id",
    header: "ID",
    accessorFn: (row) => row.id,
  },
  {
    key: "title",
    header: "标题",
    accessorFn: (row) => row.title,
  },
  // 其他列定义...
];

3. 处理分类关联数据

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

const categoryColumns = {
  key: "category",
  header: "分类",
  accessorFn: (row) => {
    const category = categories?.data?.find(
      (item) => item.id === row.category.id
    );
    return category?.title;
  },
};

添加到应用路由

完成列表组件后，需要将其添加到应用路由中：

在App.tsx中导入列表组件
替换原有的Inferencer组件
确保路由路径正确配置

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

// 在路由配置中
<Route path="blog-posts">
  <Route index element={<BlogPostList />} />
  {/* 其他路由... */}
</Route>