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

本文链接：https://blog.youkuaiyun.com/gitblog_00125/article/details/148360623

Refine项目教程：手动创建Headless列表页面

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

前言

在Refine项目中，我们通常会使用Inferencer工具快速生成CRUD页面。但在实际开发中，我们往往需要对这些页面进行深度定制。本文将详细介绍如何手动创建Headless风格的列表页面，并深入解析其中的关键技术和实现原理。

准备工作

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

完成了Refine项目的基本配置
创建了blog-posts资源相关的基础结构
熟悉React和TypeScript的基本语法

创建列表页面

第一步：创建文件结构

在src/pages/blog-posts目录下创建list.tsx文件，这将是我们的列表页面主文件。

第二步：获取基础代码

虽然我们可以完全从零开始编写代码，但建议先使用Inferencer生成基础代码，然后在其基础上进行修改：

启动开发服务器并访问博客文章列表页面
点击页面右下角的"显示代码"按钮
复制生成的代码到你的list.tsx文件中

核心组件解析

useTable钩子

useTable是列表页面的核心钩子，它结合了TanStack Table v8和Refine的核心功能：

import { useTable } from "@refinedev/react-table";

const {
  getHeaderGroups,
  getRowModel,
  setOptions,
  refineCore: { setCurrent, pageCount, current },
} = useTable({
  columns,
});

主要功能包括：

数据获取与状态管理
分页控制
排序功能
过滤功能

表格列定义

列定义是表格的核心配置，示例代码如下：

const columns = React.useMemo<ColumnDef<any>[]>(
  () => [
    {
      accessorKey: "id",
      header: "ID",
    },
    {
      accessorKey: "title",
      header: "Title",
    },
    // 其他列定义...
  ],
  []
);

每列可以配置：

访问器(accessor)：指定数据字段
表头(header)：显示文本
单元格渲染(cell)：自定义渲染逻辑
排序和过滤选项

处理关联关系

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

useMany钩子的使用

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

这段代码会：

从博客文章数据中提取所有分类ID
通过单个请求批量获取这些分类的详细信息
返回包含所有分类数据的响应

关联数据显示

获取关联数据后，我们可以在表格中显示：

{
  accessorKey: "category",
  header: "Category",
  cell: function render({ getValue }) {
    const category = categories?.data?.find(
      (item) => item.id === getValue()?.id
    );
    return category?.title;
  },
}

页面导航

Refine提供了useNavigation钩子来处理页面跳转：

import { useNavigation } from "@refinedev/core";

const { edit, show } = useNavigation();

// 在操作列中使用
{
  accessorKey: "actions",
  header: "Actions",
  cell: function render({ getValue }) {
    return (
      <div>
        <button onClick={() => show("blog_posts", getValue()?.id)}>
          Show
        </button>
        <button onClick={() => edit("blog_posts", getValue()?.id)}>
          Edit
        </button>
      </div>
    );
  },
}

集成到主应用

完成列表页面后，需要将其集成到主应用中：

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

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

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