如何創建可重用的 antd 表 react

Question

我正在使用 antd react 框架，我有很多組件呈現帶有分頁和排序的antd 表，所以我決定制作一個可重用的表我不想每次在下面的實現中需要一個表時都重復我自己我成功加載了表，但是分頁和排序不能正常工作，請問有人能幫我嗎，

這是我嘗試過的可重用表組件（useTable.jsx）：-

import { Table } from 'antd';
import React, { useEffect, useState } from 'react';

export function useTable(columns, data, fetchData, loading) {
  

  const handleTableChange = (newPagination, filters, sorter) => {
    fetchData({
      sortField: sorter.field,
      sortOrder: sorter.order,
      pagination: newPagination,
      ...filters,
    });
  };

  const TableContainer = () => (
    <Table columns={columns} dataSource={data} loading={loading} onChange={handleTableChange} />
  );
  return { TableContainer };
}

使用表的父組件：-

import React, { useEffect, useState } from 'react';
import qs from 'qs';
import { Table, Card, Button, Input, Space } from 'antd';
import styles from './Class.less';
import { useTable } from '../../../components/common/useTable';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
    render: (name) => `${name.first} ${name.last}`,
    width: '20%',
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    filters: [
      {
        text: 'Male',
        value: 'male',
      },
      {
        text: 'Female',
        value: 'female',
      },
    ],
    width: '20%',
  },
  {
    title: 'other',
    dataIndex: 'other',
    sorter: true,
  },

  {
    title: 'Action',
    dataIndex: 'email',
    render: () => (
      <Space>
        <a color="yellow" onClick={() => alert('edit')}>
          Edit
        </a>
        <a color="yellow" onClick={() => alert('delete')}>
          Delete
        </a>
      </Space>
    ),
  },
];

const getRandomuserParams = (params) => ({
  results: params.pagination?.pageSize,
  page: params.pagination?.current,
  ...params,
});
const Classes = () => {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
  });

  const fetchData = (params = {}) => {
    setLoading(true);
    fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(params))}`)
      .then((res) => res.json())
      .then(({ results }) => {
        setData(results);
        setLoading(false);
        setPagination({
          ...params.pagination,
          total: 200, // 200 is mock data, you should read it from server
          // total: data.totalCount,
        });
      });
  };

  const { TableContainer } = useTable(columns, data, fetchData, loading);

  useEffect(() => {
    fetchData({
      pagination,
    });
  }, []);

  return (
    <Card className={styles.card}>
      <TableContainer
        columns={columns}
        rowKey={(record) => record.login.uuid}
        dataSource={data}
        loading={loading}
      />
    </Card>
  );
};

export default Classes;

謝謝！

Answer 1

您可以嘗試向 useTable 掛鈎添加分頁道具，如下所示。

export function useTable(columns, data, fetchData, loading, pagination) {
  const handleTableChange = (newPagination, filters, sorter) => {
    fetchData({
      sortField: sorter.field,
      sortOrder: sorter.order,
      pagination: newPagination,
      ...filters
    });
  };

  const TableContainer = () => (
    <Table
      columns={columns}
      rowKey={(record) => record.login.uuid}
      dataSource={data}
      loading={loading}
      onChange={handleTableChange}
      pagination={pagination}
    />
  );
  return { TableContainer };
}

您能否驗證組件中的 TableContainer 是否如下所示。

 const { TableContainer } = useTable(
    columns,
    data,
    fetchData,
    loading,
    pagination
  );

你的組件返回：

return (
    <Card>
      <TableContainer
        columns={columns}
        rowKey={(record) => record.login.uuid}
        dataSource={data}
        loading={loading}
        pagination={pagination}
      />
    </Card>
  );

Answer 2

我自己想出來了，這是我的解決方案

export function useTable(columns, data) {
  const [page, setPage] = useState(1);

  const handlePageChange = (newpage) => {
    setPage(newpage);
  };

  const TableContainer = ({ loading }) => (
    <Table
      columns={columns}
      dataSource={data}
      pagination={{
        current: page,
        pageSize: 6,
        total: data?.length,
        onChange: (page) => handlePageChange(page),
        size: 'medium',
      }}
      loading={loading}
    />
  );
  return { TableContainer };

}

我的組成部分：-

 return (
    <Card className={styles.card}>
      <TableContainer columns={columns} rowKey={(record) => record.login.uuid} dataSource={data} />
    </Card>
  );