封装table组件

封装Table组件可以使代码更加简洁、易读，并且可以复用。以下是一个简单的封装Table组件的示例：

import React from 'react';
import PropTypes from 'prop-types';
import { Table } from 'antd';

const CustomTable = ({ columns, dataSource, loading, pagination }) => {
  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      loading={loading}
      pagination={pagination}
    />
  );
};

CustomTable.propTypes = {
  columns: PropTypes.array.isRequired,
  dataSource: PropTypes.array.isRequired,
  loading: PropTypes.bool.isRequired,
  pagination: PropTypes.object.isRequired,
};

export default CustomTable;

在这个示例中，我们使用了Ant Design的Table组件，并将其封装为CustomTable组件。CustomTable组件接收四个props：columns（表格列的配置描述）、dataSource（表格数据）、loading（表格是否正在加载）和pagination（分页器的配置项）。这些props都是必需的，并且我们使用PropTypes对其进行了类型检查。

使用CustomTable组件时，只需要像下面这样传入props即可：

import React from 'react';
import CustomTable from './CustomTable';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
];

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
  },
];

const pagination = {
  pageSize: 10,
};

const Example = () => {
  return (
    <CustomTable
      columns={columns}
      dataSource={dataSource}
      loading={false}
      pagination={pagination}
    />
  );
};

export default Example;

以上就是一个简单的封装Table组件的示例。根据实际需求，可以在CustomTable组件中添加更多的props和配置项。