前言发现Formik是在我学习redux-form过程中从国外一篇博客上偶然发现的，看到作者的高度肯定后我立即转到github上，正如许多朋友所关注的，Formik的星数达8282，这个数字在github虽然不算很高，但是从基于React技术跨平台表单开发这个主题角度来看，此数字已经相当可观了。不自觉地，我对比了redux-form与Formik的几个数据，如下：库开源库的时间星数redux-fo
最近参与了一个基于Raact技术栈的项目，距离我上一次在工作中react已经过去了挺长一段时间，因此打算整理在react中封装组件的一些方法。1、extends 正向继承对于类组件而言，可以通过extends继承某个父类，从而获得一些公共的能力class LogPage extends React.Component { trackLog() { console.log("tr
转载
2024-06-06 05:55:21
110阅读
原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我对文章进行了分割，本篇文章重点阐述 封装。因本人水平有限，文中部分翻译可能不够准确，如果您有更好的想法，欢迎在评论区指出。封装一个封装组件提供 props 控制其行为而不是暴露其内部结构。耦合是决定组件之间依赖程度的系统特性。根据组件的依赖程度，可区分两种耦合
每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）前言 在开发项目中，经常使用表单模块，来完成交互的过程。但是我感觉，在以前开发的过程中，就是直接copy，没有仔细的去理解其中的逻辑，只要现象满足就可以。但是最近项目中想封装一个通用的表单组件，还是必要知道其中的逻辑和各个属性。所以，就回头过来仔细的理一下。 使用在antd4中，使用form表单，有着三种不同
转载
2024-04-26 08:42:54
177阅读
功能支持横向分布和纵向分布可自定义内容（通过插槽）可修改基本样式（如宽度、高度、文本排列）效果写的很简陋哈，只实现了基本功能，还有许多地方需要完善。下面分别为常用的三种模式：纵向表格（正常情况）横向表格可操作表格使用<template>
<s-table :dataSource="state.dataSource" layout="column">
转载
2024-10-09 08:06:07
66阅读
Ant Design（蚂蚁组件）是蚂蚁集团体验技术部经过大量项目实践和总结，逐步打磨出的一个设计系统，内含带有 React 的 UI 库。它是为企业级产品设计而创建的。Ant Design 提供了高质量的交互界面设计组件和演示。作为 UI 设计师，在我们的工作中，善于利用现有的设计系统组件能够极大地提升工作效率。今天，即时设计设计师将向大家介绍广泛使用的设计系统 Ant Design 以及它的使用
转载
2024-03-12 14:41:01
55阅读
大家好，工作闲暇之余又来续写一下Formik这个库的文章了，这次文章主要内容为如下：更多表单组件的封装示例
单选/多选按钮选择器时间选择器文本输入框提交按钮Formik的表单验证Formik的表单提交处理总结表单组件的封装在上篇我们简单的封装了一下InputItem组件，并为该组件增加了错误提示功能，接下来我们可以封装我们常用的表单组件并通过同样的方法为其添加错误提示功能。HOCError
只是记录一下自己遇到的些许问题和解决方案的汇总，方便以后查阅。废话不多说，直接上重点：（遇到的难题）一、antd-design组件难以自定义样式这里 antd-design 不像web一样，可以直接找到样式class在global中去定义。在antd-design里有一个后门，就是styles属性，一般我们要修改样式，都可以去源码里找到对应component的style目录，我们就可以找到对应的样
转载
2024-09-10 10:14:27
132阅读
隐藏表单域:
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。代码格式：＜input type="hidden" name="..." value="..."＞属性解释：type="hidden"定义隐藏域；name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；va
好多年没有写博客了，突然写一篇。最近学习AntdVue2.x+Vue3.x ，据说antdv 特别优秀，更新也及时还适配了vue3，所以，选择了antdv，而不是elementui，虽然elementui也有新版本了，但是总觉得那不是同一套体系了在学习到Form表单验证的时候，发现一个问题，来这里吐个槽，看看大家有没有遇到这样的问题。问题的起因是，Antdv表单项间距特别高，我想他这是为了可以放错
自定义指令创建regular.js文件import regular from "./regular"; // 引入的正则
let timer = null; // 监听input框，会一直触发，所以做个防抖
export default {
install(Vue) { // install开发新的插件及全局注册组件等
Vue.directive("custom", {
转载
2024-07-09 08:12:52
168阅读
前面项目已经建起来了，但是没有React基础怎么办，从头学习，这个项目使用的是基于React16.X版本的几种技术集成，那么我们就从网上找一些相关的资料进行研究，我的习惯是用到哪学到哪。 一、先看一些基础示例1、render用法 ReactDOM.render( <h1>Hello, world!<
转载
2020-01-20 15:01:00
192阅读
2评论
AntDesign引入简介
原创
2022-03-10 09:42:33
159阅读
AntDesign引入简介
原创
2021-09-01 09:37:26
535阅读
近期准备撸一撸react框架，学习学习，记录一下～ 之前对react只是有过了解，可以看看代码，但自己没动手过。首先创建项目（这边直接用的ts版本）yarn create react-app demo --template typescript进入项目并启动cd demo
yarn start浏览器会自动弹出并访问http://localhost:3000/,然后过一会页面就会出来react的lo
转载
2024-10-15 20:26:51
52阅读
在 create-react-app 中使用 create-react-app 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。 安装和初始化#
我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 yarn。$
Drawable讲过三个动画，animation-list定义帧动画，animated-rotate定义旋转动画，animated-selector定义选择状态动画，这三个属于drawable动画（也称Frame-By-Frame Animation）。除了drawable动画，Android框架还提供了另外两种动画体系：视图动画(View Animation 也称Tweened Animatio
转载
2024-07-18 23:05:34
36阅读
朋友有个小项目的需求，想要用.NET Core 做后端，前端使用React Antd Pro，比较正常的前后端分离项目需求。研究了一下发现dotnet 项目模板里面自带react框架，是可以直接使用的。PS：非服务端渲染，这里只是使用了Statis File中间件发布了前端页面。框架依赖dotnet core sdk 5.0node 14.0 + npm➜ RCTableAdminTemplat
React学习笔记3（React路由、Ant Design）零 l 一 l （一）【了解】一些概念1、SPA（Single Page web Application 单页Web应用）2、路由3、路由组件与一般组件（二）效果图（三）< BrowserRouter > 与 < HashRouter >（四）< Link > 、 < Nav
在开发Web应用程序时，分页是一个常见的需求，特别是在展示大量数据的情况下。本文将介绍如何在React应用中使用Ant Design的Table组件实现分页功能，并通过一个简单的例子进行说明。1. 引言分页能够帮助用户更高效地浏览和管理数据。当数据量较大时，一次性加载所有数据可能会导致性能问题，同时也会影响用户体验。因此，分页成为了展示大量数据的有效手段之一。2. 技术栈React: 用于构建用户
原创
2024-08-25 09:34:10
295阅读
