文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路

在数栈过去的产品迭代中受限于当前组件的版本，积累了很多待解决的问题，随着新的功能需求不断增加，很多原先的组件以及交互设计需要进行优化。...对 3.x 的兼容性处理 或许是考虑到部分组件升级的毁坏性，antd4.x 中依然保留了对 3.x 版本的兼容，废弃的组件通过 @ant-design/compatible 保持兼容，例如 Icon、Form...将 Modal.method() 中字符串 icon 属性的调用转换成从 @ant-design/icons 中引入 antd4-codemod 上图这类报错是 Icon 组件自动替换错误，有 2 种处理方式...注意以下问题： ・将之前写在 getFieldDecorator 中的 name/rules 等移到属性中； ・初始化在 form 中处理，避免同名字段冲突问题； ・关于表单联动的问题，官方提供了 shouldUpdate...Button 在 antd 3.0 中危险按钮采用 type。 使用如下：涉及改动点 type、dangr 属性。 Tabs 使标签页不被选中。

4K30

antd4与antd3Form表单设计区别

核心 antd3思想：使用HOC（高阶组件）包裹form表单，HOC组件中的state存储所有的value值，定义设置值和获取值的方法 缺点：动一发牵全身，一个value值改变，因为这是顶级状态，所以所有的子组件都会因父组件的重新...render而render,浪费了性能 antd4思想：使用Context 包裹form表单，自定义一个store类，存储所有的表单value值，定义设置值和获取值得方法，因为不是组件内部状态，需要自己定义更新函数...，在每个Form.Item中定义forceUpdate()强制更新函数，当我们setValue值得时候，根据name值判断出要更新的Form.Item,可以调用该Item的更新函数更新，相比ant3节约了性能...（个人觉得这个思想类似Vue了，涉嫌抄袭） ant4简单原理展示 基本用法,拷贝整理下可测试 //FormPage页面 函数组件和类组件略有差异，类组件会用到神奇的React.forwardRef...div> 这是的表单 {/* 函数组件不能使用hooks,这里有变化 */} {/*ref想在内部获取

1.9K20
您找到你想要的搜索结果了吗？
是的
没有找到

Ant Design 4.0 正式版来了！

v4 文档地址：https://ant.design[2] 需要注意的是，v3 版本于 2019 年 12 月合入 3.x-stable 分支并进入维护状态。...设计规范升级 我们将基础圆角由 4px 调整为 2px。中后台产品以效率为第一优先级，圆角样式作为 UI 上的重要细节，更小的圆角从视觉上减少界面细节，提升了信息阅读效率。...在 v4 版本中，Form 将自带表单实例，你可以直接通过 Form.Item 的 name 属性进行数据绑定，从而简化你的代码： - const { form } = this.props; - const...而对于不支持 sticky 的 IE 11，我们采取降级处理。 同时，我们提供了新的 summary API 用于实现总结行的效果： ? 对于 sorter 提供了多列排序的功能： ?...如何升级 为了尽可能简化升级，我们保持了最大兼容。但是仍然有一部分 breaking change 需要注意。

3.2K30

React Hook技术实战篇

在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, 如State Hook提供类型setState的功能, Effect Hook提供处理副作用的函数...Hook中的useState.....但是在运行程序的时候, 会出现一个问题即会发送两次请求,使用useEffect发送请求时,相当于在componentDidMount和componentDidUpdate中都发送了一次请求,这显然是错误的...自定义Hook 当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中, 用于可复用的组件函数. ... const useFetchData = () => { const [search...例子中, 获取的数据和loading状态没有发生改变, 不过都聚合到了reducer中, 又Reducer Hook集中管理. const dataFetchReducer = (state, action

4.3K80

React 折腾记 - (6) 基于React 16.6 + Antd 3.10.7封装的一个声明式的查询组件

前言 最近把新的后台系统写好了..用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象中的好用,看到umi 2.x了.就着手又开始重构了......折叠展开搜索条件,默认六个隐藏展开按钮,大于则显示(点击直接取数据源的长度) ? 传递子组件作为搜索按钮区域 ?...尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定,设置默认值等); 为了降低复杂度,子组件不考虑dva来维护状态...{ border-radius: 6px; } .ant-advanced-search-form .ant-form-item { display: flex; flex-wrap:...(若是用ts的小伙伴,运行时类型推断比这个强大的多,还不会打包冗余代码) 没发布npm , 只是提供我写的思路,对您有没有帮助,见仁见智 依赖moment,antd 可以自行拓展的点 比如垂直展示 比如表单校验

2.6K10

Hooks + TS 搭建一个任务管理系统（一）-- 登录注册页面

第二个状态是错误状态，用来接收登录页面的错误信息，当有错误发生时，都会丢到这个变量当中 // 标识当前是注册还是登录，false 表示当前是登录状态 const [isRegister, setIsRegister...因此我们想在这里抽象出两个 custom hook ，一个用来获取数据，一个用来处理异步请求，写这两个之前，我们先写一个专门用来发送请求的文件，我们将我们关于登录注册的请求全部写在这个文件当中，再暴露出去...，这样代码看起来思路更加清晰 三、编写 auth-provider 文件 我们在这个文件中来处理我们需要发送的相关请求，首先，由于我们需要实现刷新后仍保持登录状态的效果，我们需要设置 token ，并且对于...为了获取到传入的 promise 对象抛出的错误，我需要使用 then 中的第二个参数来接收这 错误对象，再返回这个错误，才能使用 catch 获取，正常情况下，catch 获取不到这个错误 // run...通过编写这个 custom hook 我们对 useAsync 有了更好的理解，同时也学会了如何使用 context 来进行数据的共享 六、按钮触发函数执行 在编写完了前面的几个 custom hook

1.3K11

前端开发者们，这些知识tips你必须知道

那么，在这种情况下，网页应该如何表现呢？viewport 元素就是来解决这个问题的。...在此情况下，try catch 是不能捕捉到这个错误的，因为它只能处理同步异常。而 feedbackSubmit() 方法是一个异步方法，所以你需要在回调函数中处理异常。...{ console.log('请求拦截器：处理错误', error); return error; }, }); // 添加响应拦截器...('响应拦截器：处理错误', error); return error; }, }); // 处理请求拦截器--遍历所有的请求拦截器，并执行onFulfilled...在 request 函数中，先创建了请求拦截器和响应拦截器，使用 use 方法添加拦截器，并在请求拦截器中处理请求，在响应拦截器中处理响应。最后返回处理后的响应数据。

37410

前端开发者必须知道的日常小技巧！

那么，在这种情况下，网页应该如何表现呢？viewport 元素就是来解决这个问题的。...在此情况下，try catch 是不能捕捉到这个错误的，因为它只能处理同步异常。而 feedbackSubmit() 方法是一个异步方法，所以你需要在回调函数中处理异常。...{ console.log('请求拦截器：处理错误', error); return error; }, }); // 添加响应拦截器...('响应拦截器：处理错误', error); return error; }, }); // 处理请求拦截器--遍历所有的请求拦截器，并执行onFulfilled...在 request 函数中，先创建了请求拦截器和响应拦截器，使用 use 方法添加拦截器，并在请求拦截器中处理请求，在响应拦截器中处理响应。最后返回处理后的响应数据。

20010

React 实现一个markdown

这个就是我模仿的掘金的内容。 首先点击发布按钮之后打卡抽屉，在抽屉中分别录入了文章分类、收录至专栏、文章封面、文章摘要等。都录入完毕之后点击底下的确认并发布才真的发布了文章。...对于这种整个页面的讲解，可能我的讲解不是很有用，还是需要自己去读代码。 我们还是分步骤讲解一下。最后我会把上一篇和这一篇的代码都放到后面。...checked={item.checked} // 改变选中状态 传入 onChange={...data: ArticleTypeObj, index: number) => (data.checked = false)); setTags(tempData); }); 选中Tag处理函数.../type'; import { TagsFilled, LoadingOutlined, PlusOutlined } from '@ant-design/icons'; /** * 组件外声明只加载一次

1.2K30

如何设计实现H5营销页面搭建系统

背景 近几年，low code、no code、pro code等越来越多的出现在我们的视野中。抱着不被卷的心态 ?，我决定来深入探索一下。 “我所在的是营销部门。...编辑右侧属性，画布中对应的组件样式就会同步更新。页面拼接完成，可通过类似预览的操作进行页面预览。预览无误，即可通过发布按钮进行活动的发布。...到这里，我们思考几个问题： 画布区域如何渲染已添加到画布中的组件（组件库组件会很多，画布中可能只需添加几个组件，考虑如何做动态渲染）？ 组件从左侧拖入画布区域，选中组件，就可知道该组件关联的属性。...组件 Schema 如何设计？ 画布区域和预览时组件的渲染是否可共用一套渲染逻辑？...这样对于数据状态的共享和同步也是很有帮助的。 组件开发/维护 来看上面提到的最后一个问题：组件库如何维护（考虑新增组件满足业务需要的场景）。

1.2K20

react+koa2+mongodb实现留言功能（可体验）

留言功能在社交中占据很重要的作用。这里实现的留言功能，参考微信朋友圈的方式： 用户发送一个TOPIC话题，读者可以在该话题下面进行评论，也可以对该话题下的留言进行评论。...前端实现 使用技术 react ant design typescript 在上面的截图中，很明显，就是一个表单的设计，外加一个列表的展示。...表单的设计使用了ant design框架自带的form组件： <Form {...layout} form={form} name="basic" onFinish={onFinish}...是的，其Form表单就是给留言使用的，其结构仅仅是剔除了主题留言中的subject字段输入框，但是实际传参我还是会使用到。 完整的前端代码可前往jimmyarea 留言（前端）查看。...本篇的重点是，对评论的话题和留言，如何转换成两层的树型结构呢？ 这就是涉及到了pid这个字段，也就是父节点的id: 话题的pid为-1，话题下留言的pid为话题的记录值。

1K10

6小时撸一个拖拽式表单生成低代码工具——leggo

注意我用了“坨”这个量词，你应该明白我在说什么。因为整个模块缺少顶层设计，导致维护成本极高，频频报bug。于是开始思考为什么不能通过拖拽直接生成和维护这些表单呢？...Antd库中Form、Form.Item以及相关input组件的所有属性和事件仍旧可以正常定义和使用。...以下是我们需要的一个表单组件，可以注意到在组件到右侧有一个“同步”按钮。这种个性化的组件并没有办法通过拖拽完成全部设计。 不要着急，我们先通过拖拽完成左侧经典表单组件部分的设计。...右侧的按钮我们只需要在渲染表单前通过中间件函数注入即可，中间件函数在leggo中是作为表单渲染前灵活拓展的手段之一。...带有关联按钮的数据都可以设置关联数据 公共状态引入方式如下： const publicStates= { testvalue: 1084, testFunc: () => 'test', }

1.2K00

React 16.x折腾记 - (6) 基于React 16.x+ Antd 3.x封装的一个声明式的查询组件(实用强大)

前言 最近把新的后台系统写好了..用的是上篇文章的技术栈(mobx+react16); 但是感觉mobx没有想象中的好用,看到umi 2.x了，就着手又开始重构了。...,大于则显示(点击直接取数据源的长度) 传递子组件作为搜索按钮区域 统一变动控件的规格 重置表单 子组件引入自身响应式条件(会话状态,按钮太多,等分会造成各种换行,不舒服) 非Input的控件,自动触发表单提交...{ border-radius: 6px; } .ant-advanced-search-form .ant-form-item { display: flex; flex-wrap:...wrap; } .ant-advanced-search-form .ant-form-item-control-wrapper { flex: 1; } 总结 温馨提示 没用prop-types..., 感觉没必要,若用ts的小伙伴,运行时类型推断比这个强大的多,还不会打包冗余代码 没发布npm , 只是提供我写的思路,对您有没有帮助,见仁见智 依赖moment,antd,lodash 可以自行拓展的点

13010

如何评价Dooring低代码零代码搭建平台？

对于数据收集能力, 可以参考我的另一篇文章: 前端如何一键生成多维度数据可视化分析报表 协同支持 之前 H5-Dooring 是采用 socket 来实现双向通信的, 不同的用户如何想协作搭建, 可以通过...在当前的场景下就是代码编译压缩完成之后，通知给浏览器，以便浏览器显示下载状态弹窗。一共有三种状态：「进行中」，「已完成」，「失败」。...好在nodejs设计支持子进程, 我们可以把耗时任务放入子进程中来处理,当子进程处理完成之后再通知主进程....config.json') const res = WF(filePath, data) exec(cmdStr, function(err,stdout,stderr){ if(err) { // 错误处理...「socket.io」实现消息实时推送 在上面介绍的 「exec实现解析并执行命令行指令」 中还有一些细节可以优化，比如代码执行进程的反馈，执行状态的反馈。

1.1K10

react hook+ts+rouerV6 dev notes

1.React useHistory 更新为useNavigate如何传值 路由组件如何传值 1.组件跳转并传值 （1）导入 import { useNavigate } from ‘react-router-dom...就可以了，验证独自给form.item加上rules即可 参考文档：https://ant.design/components/form-cn/#header 4.重置antd-form 创建一个ref... const formRef: any = React.createRef() 挂载到form上（我的组件是通过子组件传值过去的） 传递给子组件  <RequestForm formRef={formRef...  }, [filterArgs]) filterArgs就是我们要传递的Props，如果这个传递的值更新了 就会触发UseEffect 小技巧： 一个hooks里面可以写多个useEffect 来处理不同的方法...return Promise.resolve();                   }                   return Promise.reject(new Error("验证码错误

2.4K10

我们应该如何优雅的处理 React 中受控与非受控

引言 大家好，我是19组清风。...这也就意味着，如果组件外部的状态并不改变（这里指组件的 props 中的 value）时，即使用户在页面上展示的 input 如何输入 input 框中渲染的值也是不会发生任何改变的。...类似 Ant-Design 中的 Input 组件。它既接收显示传入 value 和 onChange 的组合方式，同时也支持传入 defaultValue 的非受控方式实现。...只需要传入 defaultValue 的值就可以使用非受控状态的 input 。 受控处理 上述我们用非常简单的代码实现了非受控的 Input 输入框，此时我们再来看看如何兼顾受控状态的值。...这里我们首先明确 changeEventPrevRef 是和非受控状态相关的一个 ref 变量。 其次，在 React 中存在一个批处理更新(Batch Updating)的概念。

6.4K10

vue-ant design示例大全——按钮本地cssjs资源

vue-ant design示例大全——本地css/js资源 ---- 示例资源来自官网：https://www.antdv.com/components/button-cn 在 Ant Design...Vue 中我们提供了五种按钮。...禁用：行动点不可用的时候，一般需要文案解释。 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。 <!...按钮失效状态 boolean false ghost 幽灵属性，使按钮背景透明 boolean false href 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 string...FAQ # 如何移除 2 个汉字之间的空格 # 根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 ConfigProvider

2.4K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券