/* * 构建数据列 * */ tableColumns = (currentData) => { let group = lodashGroupBy(currentData, 'level1'); console.log('group', group); return [{ title: '统计事项一级目录', dataIndex: ...
原创
2022-05-05 15:04:34
598阅读
React学习笔记3(React路由、Ant Design)零 l 一 l (一)【了解】一些概念1、SPA(Single Page web Application 单页Web应用)2、路由3、路由组件与一般组件(二)效果图(三)< BrowserRouter > 与 < HashRouter >(四)< Link > 、 < Nav
react + Ant Design后台管理系统下载命令:npm install antd --save官网:https://ant.design
Step 1:安装脚手架工具 (Node.js 需要 v4.x 或以上)$ npm install antd-init -gstep 2:创建项目&初始化$ mkdir ant-design-demo && cd ant-de
一、Ant Design of React ://ant.design/docs/react/introduce 二、建立webpack工程 webpack+react demo下载 项目的启动,参考 三、简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js
转载
2016-07-20 21:21:00
663阅读
2评论
今天刚刚运用antd做了个分页,根据官网上的指导和一些自己的摸索,将其完成,有些代码编写的还是比较繁琐,没有做简化。antd官网讲的还是比较详细的,有案例,本例在其基础上扩展了一下功能,现将其按照例子的方式记录下来,以供以后参考。 先将显示出来的效果放出来(注:本次案例是点击一次页码请求一页数据): 编码过程大体需要以下几步:1.初始化必要属性,如数据 data,数据条数 co
转载
2024-06-19 15:21:37
858阅读
react 封装通用组件之table组件工作中发现我们在做react后台管理系统的时候,会有大量重复的页面(如下图),比如form表单和table组件、以及接口通讯,新增修改modal等。虽然antd里面的组件已经很简便了,但是遇到众多功能类似的页面,每次都复制大量的代码还是会耗费很大的时间而且不易维护,看起来很不清爽,于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。table表格的
转载
2024-05-31 01:19:46
888阅读
最近参与了一个基于Raact技术栈的项目,距离我上一次在工作中react已经过去了挺长一段时间,因此打算整理在react中封装组件的一些方法。1、extends 正向继承对于类组件而言,可以通过extends继承某个父类,从而获得一些公共的能力class LogPage extends React.Component { trackLog() { console.log("tr
转载
2024-06-06 05:55:21
110阅读
一、需求 用户对不同的应用需要有不同的权限,用户一般和角色关联在一起,新建角色的时候会选择该角色对应的应用,然后对应用分配权限。于是写了一种实现的方式。首先应用是一个二级树,一级表示的是应用分组,二级表示的是应用,这是table的最左边的数据。然后是按钮的数据,这里显示在table的头部。 二、效果
转载
2016-08-27 21:30:00
411阅读
2评论
这篇文章来讲解一下angular内置的filter过滤器.没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就是过滤器的名字~这个过滤器是干嘛的呢? 它的作用是: '从数组中过滤出需要的项,放入新的数组并返回这个新数组。'一.用在html模板里:因为是用来过滤数组,所以这个过滤器基本上都用在ng-repeat指
概述一个超级简单的日历,日历核心代码只有十几行,方便以后扩展成日程管理。源码点击这里前言日历或者日程管理,在项目中是个高频使用的组件,经常会碰到日程管理这种需求,网上已经有很多成熟的库,但是产品经理的思维是你我无法揣测的,所以先储备一下,做个简单的日历,方便以后用的的时候直接用,代码使用react写的,但是核心的日历计算思想可以用到各种框架中。实现首先看看最终实现的效果可以看到一个能查看上一个月或
转载
2024-04-23 15:31:12
324阅读
Lodash通过降低 array、number、objects、strings的使用难度从而让JavaScript编程变得更简单。Lodash是个非常受欢迎的工具库,在Github上获得超4万星的点赞。根据官网的介绍,Lodash是一个现代的JavaScript实用工具库,具有模块化,高效能等特性,并且具备很多附加功能。尽管Lodash不是专门的React工具库,但它是我个人最喜欢的工
react的目的是将前端页面组件化,用状态机的思维模式去控制组件。组件和组件之间肯定是有关系得,通过合理得组件设计,给每一个组件划定合适得边界,可以有效降低当我们对页面进行重构时对其他组件之间得影响。同时也可以使我们得代码更加美观。1、高耦合低内聚。高耦合:将功能联系紧密得部分放到一个容器组件内对外暴漏出index.js,目录结构如下:├── components│ └── App└── inde
转载
2023-07-14 13:40:39
117阅读
重新设计 React 组件库
诚身
7 个月前 在 react + redux 已经成为大部分前端项目底层架构的今天,让我们再次回到软件工程界一个永恒问题的探讨上来,那就是如何提升一个开发团队的开发效率? 从宏观的角度来讲,其实只有良好的抽象才能真正提高一个团队的开发效率,而囿于不同产品所面临的不同业务需求,当我们抽丝剥茧般地将一个个前端工程抽象到最后一层,那么剩下的其实就只有
转载
2024-08-26 10:07:51
61阅读
表格组件的目标效果:(1)表头可以合并、(2)表体套表格 版本一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>勾选和分页组件之React16.4.0版</title> <script src="https://cdn. ...
转载
2021-07-29 16:26:00
120阅读
React组件 React组件介绍 组件是React的一等公民,使用React就是在用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点:可复用、独立、可组合 React组件的两种创建方式 使用函数创建组件 函数组件:使用JS的函数(或箭头函数)创建的组件 约定1:函数名称必须以大 ...
转载
2021-08-02 01:13:00
202阅读
2评论
React轻巧源于React组件的思想。就像没有函数的概念之前,计算一个长方形的面积,每次都是相同的计算长和宽的乘积,然后输出。React允许我们自定义组件,在以后的工作过程中,我们想渲染不同的组件,都可以自定义,通过render函数返回DOM元素节点。React组件示例:<!DOCTYPE html><html> <head> &...
原创
2021-07-28 09:50:19
229阅读
组件传参 多组件使用!
原创
2021-08-05 16:03:09
220阅读
实例 <div id="example"></div> <script type="text/babel"> function HelloMessage(props) { return <h1>Hello World!</h1>; } const element = <HelloMessage /> ...
转载
2021-06-23 00:49:00
222阅读
2评论
一、组件执行的生命周期: 1、初始没有改变state、props 的生命周期:render 2、改变 state 后的生命周期: a、父组件的 state 改变:render、【子组件的 componentWillReceiveProps、子组件对应父组件这4个周期函数】、componentDidUpdate父组件的的s
转载
2024-05-07 18:58:03
243阅读
传递props import React, {Component, VFC, ReactNode } from 'react'; const Hello: VFC<{ body: ReactNode }> = ({ body }) => { return <div>{body}</div>; };
转载
2018-08-27 16:35:00
717阅读
2评论