react 封装通用组件之table组件

7 篇文章 0 订阅
2 篇文章 0 订阅

react 封装通用组件之table组件

工作中发现我们在做react后台管理系统的时候,会有大量重复的页面(如下图),比如form表单和table组件、以及接口通讯,新增修改modal等。虽然antd里面的组件已经很简便了,但是遇到众多功能类似的页面,每次都复制大量的代码还是会耗费很大的时间而且不易维护,看起来很不清爽,于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。

table表格的封装

封装的意义: 简化代码,提高可复用性,灵活的配置基础表格,优雅的对带单选,复选框的表格,分页的表格进行处理,以及点击每行的处理

完成后的效果
在这里插入图片描述

1. 新建basicTable组件

在component中新建一个basicTable.js的表格,主要代码如下

在这里插入图片描述
思路
1.独立出一个表格,把column、data等接口开放出去,通过父组件传进来
2.处理传入的type类型,判断展示单选复选或者不选,注意的是,props传过来的无法直接改动,需要通过rowLeLection 过渡了一下。
3.把分页功能独立到了Util方法中。 点击选择框时需要把每一行的index、key、每一行的值抛出去给父组件用,代码中通过回调函数在父组件中得到改变后的值,然后在把key值传回子组件

2. 页面调用

在component中新建一个basicTable.js的表格,主要代码如下


在这里插入图片描述
在这里插入图片描述
思路: 关键在于table组件中进行文本框选择时,通过回调函数onRef把值拿到页面中,进行下一步操作,通过selectedRowKeys 把 key值再传到tanle组件中 , 达到灵活控制的目地。

3. 分页的方法放到Util文件中,用时直接在页面调用引用即可

在util 中的index.js中, 代码如下:


  pagination(data, callback) {
     return {
       onChange: current => {
         callback(current);
       },
       current: data.result.page,
       pageSize: data.result.page_size,
       total: data.result.total_count,
       showTotal: () => `共${data.result.total_count}条`,
       showQuickJumper: true,
     };
},

引入如下:在这里插入图片描述

4. 完成后的界面

img1

链接地址:
网页地址

github 地址:
github

  • 5
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个简单的React封装toast组件的示例: ```jsx import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import './toast.css'; const Toast = ({ message, duration = 3000, onClose }) => { const [visible, setVisible] = useState(false); useEffect(() => { setVisible(true); const timer = setTimeout(() => { setVisible(false); onClose && onClose(); }, duration); return () => clearTimeout(timer); }, [duration, onClose]); return visible ? ( <div className="toast"> <div className="toast-message">{message}</div> </div> ) : null; }; const showToast = (message, duration = 3000, onClose) => { const div = document.createElement('div'); document.body.appendChild(div); ReactDOM.render( <Toast message={message} duration={duration} onClose={() => { ReactDOM.unmountComponentAtNode(div); onClose && onClose(); }} />, div ); }; export default showToast; ``` 这个组件包含一个`Toast`组件一个`showToast`函数。`Toast`组件接收`message`、`duration`和`onClose`作为属性,其中`message`表示要显示的消息,`duration`表示消息显示的时间(默认为3秒),`onClose`表示关闭消息时的回调函数。 `showToast`函数用于在页面上创建一个`Toast`组件并显示消息。它接收与`Toast`组件相同的属性,还有一个可选的`onClose`回调函数,用于在消息关闭时执行其他操作。 在使用时,可以像这样调用`showToast`函数: ```jsx import React from 'react'; import showToast from './toast'; const MyComponent = () => { const handleClick = () => { showToast('Hello, world!', 2000, () => console.log('Toast closed.')); }; return ( <button onClick={handleClick}>Show Toast</button> ); }; export default MyComponent; ``` 这个示例在点击按钮时显示一个消息框,显示2秒后关闭,并在关闭时输出一条消息到控制台。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值