当前位置：首页 > React

react如何封装usetable

2026-01-23 19:31:41React

封装 useTable 的方法

在 React 中封装 useTable 通常是为了简化表格组件的使用，尤其是在处理分页、排序和筛选等功能时。以下是几种常见的封装方法。

使用 react-table 库

react-table 是一个流行的库，提供了强大的表格功能。可以通过封装 useTable 来简化其使用。

import { useTable } from 'react-table';

const useCustomTable = (columns, data, options = {}) => {
  const tableInstance = useTable(
    {
      columns,
      data,
      ...options,
    },
    // 可以添加其他插件，如 useSortBy、usePagination 等
  );

  return tableInstance;
};

export default useCustomTable;

封装分页和排序功能

如果需要分页和排序功能，可以通过插件扩展 useTable。

import { useTable, useSortBy, usePagination } from 'react-table';

const useCustomTable = (columns, data) => {
  const tableInstance = useTable(
    {
      columns,
      data,
    },
    useSortBy,
    usePagination
  );

  return {
    ...tableInstance,
    // 提供简化的分页方法
    nextPage: tableInstance.nextPage,
    previousPage: tableInstance.previousPage,
    gotoPage: tableInstance.gotoPage,
  };
};

export default useCustomTable;

自定义钩子封装

如果不想依赖 react-table，可以完全自定义一个 useTable 钩子。

import { useState } from 'react';

const useCustomTable = (initialData, initialPageSize = 10) => {
  const [data, setData] = useState(initialData);
  const [pageIndex, setPageIndex] = useState(0);
  const [pageSize, setPageSize] = useState(initialPageSize);

  const paginatedData = data.slice(
    pageIndex * pageSize,
    (pageIndex + 1) * pageSize
  );

  const totalPages = Math.ceil(data.length / pageSize);

  return {
    data: paginatedData,
    pageIndex,
    pageSize,
    totalPages,
    setData,
    setPageIndex,
    setPageSize,
  };
};

export default useCustomTable;

结合 API 请求

如果表格数据需要从 API 获取，可以在封装中集成请求逻辑。

import { useState, useEffect } from 'react';

const useCustomTable = (fetchData, initialPageSize = 10) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pageIndex, setPageIndex] = useState(0);
  const [pageSize, setPageSize] = useState(initialPageSize);

  useEffect(() => {
    setLoading(true);
    fetchData(pageIndex, pageSize)
      .then((response) => {
        setData(response.data);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [pageIndex, pageSize]);

  return {
    data,
    loading,
    pageIndex,
    pageSize,
    setPageIndex,
    setPageSize,
  };
};

export default useCustomTable;

使用示例

以下是使用封装后的 useCustomTable 的示例。

react如何封装usetable

import useCustomTable from './useCustomTable';

const columns = [
  { Header: 'Name', accessor: 'name' },
  { Header: 'Age', accessor: 'age' },
];

const data = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
];

function TableComponent() {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useCustomTable(columns, data);

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}