React中的列表组件封装

最新推荐文章于 2024-02-22 09:11:49 发布
最新推荐文章于 2024-02-22 09:11:49 发布
阅读量511 收藏 1
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40847663/article/details/103287886
版权

上个星期给我一个任务，让我把信贷工厂的列表封装一个公共的组件
下面我就记录下。
在这里插入图片描述
大体就是这样。
整体思路：我是通过extends继承组件的想法把一些公共的方法整合在公共的组件里面

查询条件封装

把查询条件写在一个数组里面，然后把这个方法写在公共的组件里面

以下就是我写的部分代码
在这里插入图片描述
在这里插入图片描述

表格体

在这里插入图片描述
在这里插入图片描述

分页器

在这里插入图片描述
差不多就这么多。

明天回地球~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react组件封装
CSDNchaxundaima的博客
03-30 327
以一个form表单为例，我们现在要封装一个表单 这个表单代码如下： import React, { Component } from 'react' export default class formitem extends Component { constructor(props){ super(props) } render() { return ( <div> <for
探索React-List：高性能滚动列表组件的利器
最新发布
gitblog_00054的博客
04-19 380
探索React-List：高性能滚动列表组件的利器 项目地址:https://gitcode.com/orgsync/react-list React-List 是一个专门为React开发者设计的高效、可定制化的虚拟滚动列表组件。它通过只渲染可视区域内的元素，显著减少了DOM节点的数量，从而提高应用性能并优化用户体验。 项目简介 React-List的核心思想是“虚拟化”（Virtualizati...
React实例 列表组件
weixin_46146313的博客
06-30 1174
新建组件 现在SRC的目录下面，新建一个文件Xiaojiejie.js文件，然后写一个基本的HTML结构。代码如下： import React,{Component} from 'react' class Xiaojiejie extends Component{ render(){ return ( <div> <div><input /> <button> 增加服务 <
react组件封装自己的理解
Alison_Z的博客
06-11 5801
为什么使用组件 一开始用react做项目的时候只知道react是组件化的，但是没有深入去理解为什么要封装组件，怎样去封装组件 上周在实际项目中自己尝试去封装了一个组件，最大的感受就是代码变得简洁了很多，本来要写三次类似代码现在只写一次就搞定了，不得不感概组件封装最实在的意义。 另一方面是可以提高我们编程的效率，代码复用性高了自然效率高了。 最后我觉得是提高思考的能力吧，换种更简单的方式去实...
react-task-list:React任务列表
03-31
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 而是将所有配置文件和传递依赖项（webp
React组件的封装
m0_46527751的博客
07-04 2482
使用 模态框 首先定义一个模态框组件的类，关于模态框内部的样式布局我们在这里面写 在父组件中定义控制模态框状态的，以及我们模态框中的标题内容等，在父组件中引入模态框组件时把模态框中需要的内容传入 在父组件中定义控制模态框显示状态的方法，如打开模态框，关闭模态框等，将关闭模态框的函数也传入子组件，在子组件中取消和关闭等组件的点击事件绑定我们传入的关闭模态框函数，实现模态框的打开和关闭 实现模态框打开关闭的过渡动画效果 全部CSS代码 模态框组件代码 主界面...
React Form组件的实现封装杂谈
08-27
React Form组件的实现封装杂谈 在 React 框架中，Form 组件是非常常见的组件之一，它提供了与用户交互的方式，例如提交订单、设置系统等。Form 组件的实现封装可以达到简化开发的目的。本文将讨论 Form 表单组件...
react中的ajax封装实例详解
11-29
通过以上步骤，我们创建了一个灵活、可配置的Ajax封装函数，可以在React组件中方便地调用，简化了对网络请求的处理。在实际应用中，这个函数可以进一步扩展，例如支持更多的HTTP方法、添加请求头管理、错误处理优化...
浅谈React中组件间抽象
08-28
最后，当我们转向使用ES6 Class来定义React组件时，发现它们不支持mixin。为了解决这个问题，ES7引入了decorator特性，允许我们在类或方法上添加元数据。虽然decorator目前尚未成为标准，但已经在一些库中得到广泛...
React Native开发封装Toast与加载Loading组件示例
10-18
主要介绍了React Native开发封装Toast与加载Loading组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react组件封装模糊输入下拉
12-25
前端开发
移动端List列表组件封装详解
大风起兮云飞扬
05-03 710
本文以ReactNative中的FlatList作为基础，对其进行二次封装。 1、为什么要进行二次封装？     首先，我们思考一下，如果不封装直接使用官方提供的FlatList组件会是什么效果。 第一：需要在当前页面处理加载数据时的loading 第二：数据为空时的界面显示。 第三：页面出错，提示重新加载的界面 。。。 如果此时你的项目中已经写了100个列表页了，产品经理想换一下loading的颜色，你怎么办？即使是CV技术如此成熟的情况下，也得去操作100次才行。
React组件封装集合
weixin_34124939的博客
11-01 815
前言 一直以来，都是在项目中将公共React组件放在Common之类的文件夹，今天抽时间把以前博客介绍过的几个React组件抽象出来，挂载到npm上，提供下载安装。 React组件集合列表 下面列举的React组件都可以点击链接去github下载使用，具体安装教程看readme文档。 1、lazy-load-component 提供webpack异步加载React组件的高阶函数。 如果你的rea...
React Native 任务列表实战
qq_33003143的博客
08-20 318
通过任务列表小项目，回顾React Native的知识点
构建React TodoList应用：管理你的任务清单
JudithHuang的博客
02-22 721
在日常生活和工作中，任务管理是一项至关重要的任务。为了更好地组织和管理我们的工作和生活，我们需要一个高效而简单的任务管理工具。本文将介绍如何使用React框架构建一个功能丰富的TodoList应用，帮助你轻松管理任务清单。
React的组件简述
xihuhu的博客
11-06 440
1.React的组件介绍 React组件时对特定的功能进行封装，主要用与对ui进行拆分，它有着独立，可复用，可组合的特点；主要的分为4大类：1.基础组件：指input和button这种基础标签，以及antd封装过的通用组件 2.业务：组件：由基础组件合成的业务抽象化UI。例如：包含了A公司所有部门信息的下拉框。3.区块组件：由基础组件和业务组件组合成的ui块。4.页面组件：展示给用户的最终页面，一般就是对应一个路由规则。 2.React组件的创建方式 React提供两种创建方式分别是：js中的函数创
react封装通用tab组件
weixin_30387799的博客
06-21 883
import React, { Component } from 'react' import PropTypes from 'prop-types' import _ from 'lodash' import classNames from 'classnames' import { CloseButton, } from '@dby-h5-clients/pc-1vn-...
组件化开发之如何封装组件-react
ccirclee的博客
08-26 1984
组件是构建用户界面的基本单元，它是一个独立的、可重用的、可组合的代码单元，用于表示UI的一部分。人话：当谈论组件时，就像在搭积木一样，每个组件都是一个独立的、可以重复使用的代码块，用来构建网页或应用的各个部分。比如界面的布局，像按钮、文本输入框这样的东西。
react有什么好用的列表组件
m0_57236802的博客
02-02 542
在React中，有许多库和组件可以用来高效地渲染列表和表格数据。选择哪个取决于你的具体需求，比如你是否需要虚拟滚动、拖拽排序、复杂的格子布局等功能。
react中组件封装在哪里
07-12
在React中，组件封装通常是在JavaScript文件中进行的。一般来说，每个组件都会被封装在一个单独的JavaScript文件中。 可以按照以下步骤进行组件封装： 1. 创建一个新的JavaScript文件，例如`MyComponent.js`。 2. 在文件中使用`import React from 'react'`导入React库。 3. 定义一个函数或类作为组件，并使用`export default`导出它。 4. 在组件中编写所需的逻辑和渲染代码。 5. 在需要使用该组件的地方，使用`import MyComponent from './MyComponent'`导入组件。 6. 在其他的React组件中，可以像使用内置标签一样使用该封装好的组件。 通过这种方式，你可以将UI和逻辑封装在一个独立的组件中，便于重用和维护。组件的封装可以根据需求的复杂性而变化，可以是简单的函数组件或更复杂的类组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值