React+hook+ts+ant design封装一个table的组件

简介: React+hook+ts+ant design封装一个table的组件

需求分析

在前端项目中 最常见的就是封装一个table的一个功能

功能思维

image.png

初始化版本(基础样式和分页)

<Table<any>
                {...resetProps}
                onChange={onTableChange}
                dataSource={list}
                rowKey={record => `${record.id}`}
                pagination={{
                    ...pagination,
                    total: page.dataTotal,
                    showTotal: () => {
                        return '共 ' + page.dataTotal + ' 条记录';
                    },
                }}
            >
                {props.children}
            </Table>

resetProps额外属性

onChange={onTableChange}分页切换

const onTableChange = useCallback((pageParams: PaginationProps) => {
        setPagination(pageParams);
        props.onChange(pageParams);
    }, []);

list 列表数据

pagination分页数据

props.children table中包裹的内容

升级版本(优化ts限制)

import React, { useCallback, useState } from 'react';
import { Table,Card } from 'antd';
import { PaginationProps } from 'antd/lib/pagination';
import { TableProps } from 'antd/lib/table';
import { PageResponseData } from './type';
import {isHKCard} from "@/utils/regexp";
interface BaseTableProps<T> extends TableProps<T> {
    data: {
        list: T[];
        page: PageResponseData;
    };
    children: React.ReactNode;
    onChange: (page: PaginationProps) => void;
}
const BasicTable: React.FC<any> = (props: BaseTableProps<any>) =>{
// function BasicTable<T extends { id?: number }>(props: BaseTableProps<T>) {
    const {
        data: { list, page },
        ...resetProps
    } = props;
    const [pagination, setPagination] = useState<PaginationProps>({
        defaultCurrent: 1,
        defaultPageSize: 10,
        showSizeChanger: true,
    });
    const onTableChange = useCallback((pageParams: PaginationProps) => {
        setPagination(pageParams);
        props.onChange(pageParams);
    }, []);
    return (
        <Card style={{ marginTop: '24px' }}>
            <Table<any>
                {...resetProps}
                onChange={onTableChange}
                dataSource={list}
                rowKey={record => `${record.id}`}
                pagination={{
                    ...pagination,
                    total: page.dataTotal,
                    showTotal: () => {
                        return '共 ' + page.dataTotal + ' 条记录';
                    },
                }}
            >
                {props.children}
            </Table>
        </Card>
    );
}
export default BasicTable;

type.ts

export type Partial<T> = {
    [P in keyof T]?: T[P];
};
export interface PageQueryParams {
    page: number;
    size: number;
}
export interface PageResponseData {
    dataTotal?: number;
    pageTotal?: number;
    page?: number;
    size?: number;
}
export interface QueryListResponseData<T> {
    list: T[];
    page: PageResponseData;
}

使用总结(父组件)

<BasicTable data={menuData} onChange={onTableChange} loading={loading}>
                <Table.Column<Menu> title="歌谣" dataIndex="empCode" align="center"></Table.Column>
                <Table.Column<Menu> title="歌谣" dataIndex="empName" align="center"
                ></Table.Column>
                <Table.Column<Menu> title="歌谣" dataIndex="machineName" align="center"
                ></Table.Column>
                <Table.Column<Menu> title="歌谣" dataIndex="gradle" align="center"
                ></Table.Column>
                <Table.Column<Menu> title="歌谣" dataIndex="registerDate" align="center"
                ></Table.Column>
                <Table.Column<Menu> title="歌谣" dataIndex="updateDate" align="center"></Table.Column>
                <Table.Column<Menu>
                    title="操作"
                    align="center"
                    render={(text, record, index) => (
                        <MenuButton index={index} record={record} onButtonClick={onButtonClick} />
                    )}
                ></Table.Column>
            </BasicTable>

loading 加载状态

onTableChange改变的回调

const onTableChange = useCallback(({ current, pageSize }: PaginationProps) => {
        setPage({ pageIndex: current as number, pageSize: pageSize as number });
    }, []);

menuData父传子的值

const [menuData, setMenuData] = useState<{ list: Menu[]; page: PageResponseData }>({
        list: [],
        page: {},
    });

总结

我是歌谣 放弃很容易 坚持一定很酷 关注前端小歌谣带你进入前端巅峰交流群

相关文章
|
7月前
|
前端开发
React 中的 Hook 概念
【8月更文挑战第31天】
70 0
|
8月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
84 0
|
8月前
|
前端开发 API
Vue3 【仿 react 的 hook】封装 useLocation
Vue3 【仿 react 的 hook】封装 useLocation
67 0
|
8月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
149 1
|
8月前
|
前端开发
React useImperativeHandle Hook
【7月更文挑战第1天】React useImperativeHandle Hook
44 3
|
10月前
|
前端开发 JavaScript
【边做边学】React Hooks (二)——useEffect Hook
【边做边学】React Hooks (二)——useEffect Hook
|
10月前
|
前端开发 JavaScript
React中useEffect Hook使用纠错
React中useEffect Hook使用纠错
68 0
|
4月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
309 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
4月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
79 2
|
4月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
130 9