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: {},
    });

总结

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

相关文章
|
11天前
|
移动开发 前端开发 API
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件,涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `&lt;audio&gt;` 元素和React的声明式状态管理,实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵,并提供解决方案。此外,还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
327 123
|
23天前
|
移动开发 前端开发 JavaScript
React 视频播放控制组件 Video Controls
本文介绍了如何使用 React 构建视频播放控制组件(Video Controls),涵盖基本概念、创建步骤和常见问题解决。首先,通过 HTML5 `&lt;video&gt;` 标签和 React 组件化思想,实现播放/暂停按钮和进度条等基础功能。接着,详细讲解了初始化项目、构建 `VideoControls` 组件及与主应用的集成方法。最后,针对视频无法播放、控制器状态不同步、进度条卡顿和音量控制失效等问题提供了具体解决方案,并介绍了全屏播放和自定义样式等进阶功能。希望这些内容能帮助你在实际项目中更好地实现和优化视频播放功能。
98 40
|
9天前
|
移动开发 前端开发 UED
React 音频预览组件 Audio Preview
在现代Web开发中,React框架下的音频播放功能日益重要。本文介绍如何使用React创建交互式音频预览组件,涵盖基础构建、常见问题及解决方案。通过HTML5音频标签实现基本播放控制,使用状态管理增强功能。解决跨域资源共享(CORS)、格式兼容性、自动播放限制等问题,并探讨性能优化、样式定制、事件处理、移动端适配、错误处理、国际化支持及组件集成等关键点,帮助开发者提升组件稳定性和用户体验。
26 10
|
2月前
|
存储 编解码 前端开发
React 视频上传组件 Video Upload
随着互联网的发展,视频内容在网站和应用中愈发重要。本文探讨如何使用React构建高效、可靠的视频上传组件,涵盖基础概念、常见问题及解决方案。通过React的虚拟DOM和组件化开发模式,实现文件选择、进度显示、格式验证等功能,并解决跨域请求、并发上传等易错点。提供完整代码案例,确保用户能顺畅上传视频。
137 92
|
2月前
|
前端开发 UED 索引
React 图片灯箱组件 Image Lightbox
图片灯箱组件是一种常见的Web交互模式,用户点击缩略图后弹出全屏窗口展示大图,并提供导航功能。本文介绍了基于React框架的图片灯箱组件开发,涵盖初始化状态管理、图片加载与预加载、键盘和鼠标事件处理等常见问题及解决方案。通过`useState`和`useEffect`钩子管理状态,使用懒加载和预加载优化性能,确保流畅的用户体验。代码案例展示了组件的基本功能实现,包括打开/关闭灯箱、切换图片及键盘操作。
133 80
|
2月前
|
移动开发 前端开发 JavaScript
React 图片裁剪组件 Image Cropper
本文介绍了在React中实现图片裁剪功能的方法,涵盖基础知识、常见问题及解决方案。首先,通过第三方库如`react-image-crop`或`cropperjs-react`可轻松实现图片裁剪。接着,针对性能和兼容性问题,提供了优化图片加载、处理裁剪区域响应慢、解决浏览器差异等方案。最后,通过代码案例详细解释了如何创建一个基本的图片裁剪组件,并提出了优化建议,如使用`React.memo`、添加样式支持及处理大图片预览,帮助开发者避免常见错误并提升用户体验。
136 67
|
11天前
|
缓存 前端开发 JavaScript
React 视频弹幕组件 Video Danmaku
视频弹幕(Danmaku)是在线视频平台中实时显示用户评论的方式,增强互动体验。本文介绍如何在React中实现视频弹幕组件,涵盖基本结构、常见问题及解决方案,如避免弹幕重叠、优化性能、确保同步等,并通过代码示例详细解释。帮助开发者解决样式不一致、输入验证不足和加载延迟等问题,提供实用参考。
52 20
|
18天前
|
移动开发 前端开发 UED
React 音频预览组件:Audio Preview
本文介绍如何使用 React 构建音频预览组件,涵盖基础实现、常见问题及解决方案。通过 HTML5 `&lt;audio&gt;` 标签和 React 状态管理,实现播放控制。解决文件路径、浏览器兼容性等问题,并优化性能,避免状态不同步和内存泄漏,提升用户体验。
59 22
|
3月前
|
前端开发 UED 开发者
React 悬浮按钮组件 FloatingActionButton
悬浮按钮(FAB)是常见的UI元素,用于提供突出的操作。本文介绍如何在React中使用Material-UI创建美观的FAB组件,涵盖基本概念、实现方法及常见问题解决。通过代码示例和优化技巧,帮助开发者提升用户体验,确保按钮位置、颜色、交互反馈等方面的表现,同时避免无障碍性和性能问题。
146 80
|
13天前
|
移动开发 前端开发 JavaScript
React 视频播放控制组件 Video Controls
本文深入探讨了如何使用React创建功能丰富的视频播放控制组件(Video Controls)。首先介绍了React与HTML5 `&lt;video&gt;` 标签的基础知识,展示了如何通过状态管理和事件处理实现自定义控件。接着分析了常见问题如视频加载失败、控件样式不一致、状态管理混乱和性能问题,并提供了相应的解决方案。最后通过完整代码案例详细解释了播放、暂停、进度条和音量控制的实现方法,帮助开发者在React中构建高质量的视频播放组件。
50 17