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

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

2 月，伴随着数栈 UI5.0 的焕新升级，数栈前端团队一起将组件框架 antd 从 v3.x 升级到了 v4.x，更新组件的 UI，提升产品的交互体验，使数栈产品能够更加灵活地适应未来产品功能迭代的需求...升级之后，Form 表单在数栈中的应用发生了较大的变化，从老版本的 label/component 横向排版改为了纵向改版，在横向空间不⾜的情况下，使⽤上下结构能有效提⾼填写表单的效率。...● 类名更改 .ant-table-content 更改为 .ant-table-container .ant-form-explain 更改为 .ant-form-item-explain ● dataIndex...但在 antd4 中，获取参数的数据结构发生了改变，原先直接通过 props 点出来的不行了。 ・有两种方式取值： 1）不使用 props。...如果 size 属性值为 small，则删除 size 属性。

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

​Ant Disign 4.0 升级实践扑街指南 (一)

背景 我们都知道， AntD 最近喜提了4.0, 更新了许多新特性，看的我是心花怒放， 喜不自胜。更贴心的是还提供了升级工具，看了一些文章介绍说能三分钟升级。...就挑了个简单的， 一个Form表单页。 v3 与v4的表单差别还是挺大的。...表单控制调整 Form 自带表单控制实体，如需要调用 form 方法，可以通过 Form.useForm() 创建 Form 实体进行操作： // antd v3 const Demo = ({ form...editors=0011 在官网中， 也找到了这样的描述： 在 v3 版本中，修改未操作的字段 initialValue 会同步更新字段值，这是一个 BUG。...initialValue 只有在初始化以及重置表单时生效。 所以， initialValue 只能作为组件初次挂载的时候生效。

1.4K10

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

margin去掉 效果图 响应式传入 折叠展开搜索条件,默认六个隐藏展开按钮,大于则显示(点击直接取数据源的长度) 传递子组件作为搜索按钮区域 统一变动控件的规格 重置表单 子组件引入自身响应式条件(会话状态...传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定,设置默认值等); 为了降低复杂度,...内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecorator的initialValue,已经暴露 实现的功能 使用姿势 <AdvancedSearchForm...resetSearchForm 函数 回调函数,当重置表单数据的时候 autoSearch 布尔值 启动非input的控件自动触发提交的props函数 数据源格式 data的数据格式基本和antd要求的格式一致...不懂就学,懂则分享。

12610

Vue 折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

，校验这些肯定需要考虑，所以数据的构造改造了下， 对于校验规则这些，因为走的是antd form用的那套，所以我直接在传递的时候把对应的属性拍平了， 在里面再进行组合构建需要渲染的数据结构。...this.dataSource.map(item => ({ ...this.GlobalOptions, ...item })); }, formItemLayout() { // 更改布局项目的尺寸...判断moment value = value.map(item => item.valueOf()); } } // 若是为字符串则清除两边空格...排查了许久，目前还没找出具体缘由； ---- 总结 antd vue版本目前的功能复现上，还是有所欠缺，可能vue和react实现的机子不一致导致； 不管怎么说，不考虑极端情况下，目前这个库用起来感觉还好...； 至少是可用状态，后续若有修正，会继续更新文章，谢谢阅读

4.1K40

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

折叠展开搜索条件,默认六个隐藏展开按钮,大于则显示(点击直接取数据源的长度) ? 传递子组件作为搜索按钮区域 ?...---- 抽离思路及实现 思路 合并props传递的值,尽可能的减少传递的东西(在组件内部实现默认值合并),把渲染的子组件通过遍历json去实现; 整个查询区域用的antd表单组件,聚合所有表单数据(自动双向绑定...,设置默认值等); 为了降低复杂度,子组件不考虑dva来维护状态,纯靠props和state构建,然后统一把构建的表单数据向父级暴露.....内部的state默认初始化都为空[antd对于日期控件使用null来置空],外部初始化可以用getFieldDecorator的initialValue,已经暴露 ---- 实现的功能 支持的props...(若是用ts的小伙伴,运行时类型推断比这个强大的多,还不会打包冗余代码) 没发布npm , 只是提供我写的思路,对您有没有帮助,见仁见智 依赖moment,antd 可以自行拓展的点 比如垂直展示 比如表单校验

2.6K10

React Hook技术实战篇

[]); ... } 只需要在useEffect函数中, 第二个参数为空数组, 就能实现只在组件安装时获取数据. useEffect的第二个参数可用于定义函数所依赖的所有变量(在此数组中分配), 如果其中一个变量发生变化..., 则uesEffect会再次执行....如果包含变量的数组为空，则在更新组件时挂钩不会运行，因为它不必监视任何变量.更多关于Effect Hook的详情,点击此处 手动触发Hook 此时, 组件安装成功后会获取数据, 现在, 我们希望可以有个点击按钮可以触发...这也就是使用Effect Hook来获取数据的方式, 关键在useEffect的第二个参数所依赖的项, 当依赖的项发生改变时, 第一个参数的内的函数也会被再次触发, 如果没用发生改变, 则不会再次执行,...); ... } Reducer Hook将dataFetchReducer函数和initialValue初始状态对象作为参数.

4.3K80

带你用React从零实现一个Antd4 Form表单

这是一种实现方式，也是antd3 Form的实现原理。当然这种实现方式有一定缺点，因为只要Form中有一个数据项发生了改变，那都要执行Form的setState，这就意味着整个Form表单都要更新。...那如果Form表单特别大，对性能肯定是有一定损伤的。（对antd3 Form的实现原理感兴趣的，可以留言，我后期有时间再总结一篇文章。）...，我们要确保的是组件初次渲染和更新阶段用的都是同一个数据仓库实例，这个时候我们可以使用useRef，因为useRef 返回一个可变的 ref 对象，其 .current属性被初始化为传入的参数（initialValue...很明显，这里如果想要Form中某个子组件更新的话，我们应该使用forceUpdate。...表单校验通过，则执行onFinish，失败则执行onFinishFailed。

1.2K20

Vue 折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件

前言 这次的后台管理系统项目选型用了Vue来作为主技术栈； 因为前端时间用过React来写过项目(用了antd)，感觉棒棒的。...所以这次就排除了Element UI,而采用了Ant Design Vue; 在分析整个项目原型后，发现又可以抽离类似之前的React表格搜索组件 React 折腾记 - (6) 基于React 16.x+ Antd...Vue指令的支持一团糟 以及函数式组件的写法也是坑挺多，没办法，乖乖的回归template的写法 vue官方提供了jsx的支持,日渐完善；Github:vue/jsx 控件挤成一坨的问题 这个可能是antd...value) === '[object Function]') continue; if (this.datetimeTotimeStamp) { // 若是为true,则转为时间戳...moment value = value.map(item => item.valueOf()); } } // 若是为字符串则清除两边空格

8.2K00

React进阶(3)-上手实践Redux-如何改变store中的数据

前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么更改store的数据,实现页面的更新...在前文的示例代码中已经知道组件怎么从store中取数据了,然而现在,如果想要更新state的数据?怎么办?...store的数据,并达到了与页面更新的操作 再次来梳理一下更改store的数据的一个过程,经历了哪些具体操作 1....store,在一开始constructor函数或者componentWillMount函数中,调用getState()方法,从而获得了state的数据,最终显示到页面上 而如果想要更改store的数据...这样的话,最终就完成了一次action的动作,页面也随之更新了 上面的代码进行了一次action,reducer的编写,下面接着继续的,做得并不完整,那怎么实现一个添加内容的操作呢  输入框表单内添加内容

2.5K30

React进阶(3)-上手实践Redux-如何改变store中的数据

(添加,删除todolist操作) 如何改变store的数据,实现页面的更新？ 在前文的示例代码中已经知道组件怎么从store中取数据了,然而现在,如果想要更新state的数据?怎么办?...'; // 引入antd组件库 import 'antd/dist/antd.css'; // 引入antd样式 // 1....通过上面新添加的action代码,实现一个更改store的数据,并达到了与页面更新的操作 再次来梳理一下更改store的数据的一个过程,经历了哪些具体操作 1....store,在一开始constructor函数或者componentWillMount函数中,调用getState()方法,从而获得了state的数据,最终显示到页面上 而如果想要更改store的数据,...这样的话,最终就完成了一次action的动作,页面也随之更新了 上面的代码进行了一次action,reducer的编写,下面接着继续的,做得并不完整,那怎么实现一个添加内容的操作呢 输入框表单内添加内容

2.1K20

Antd Form 实现机制解析

背景 “在中后台业务中，表单页面基础的场景包括组件值的收集、校验和更新。...Antd Form 是怎么实现的 要实现上面的方案需要解决三个问题： 如何实时收集内部组件的数据？ 如何对组件的数据进行校验？ 如何更新组件的数据？...FieldsStore 类可以理解为组件数据的管理中心，负责数据模型的初始化，并提供 Api 对组件数据进行更新和读取，以及获取组件数据的校验结果和数据更改状态。...到这里就完成了表单数据的收集和校验的环节，已经拿到了表单最新的数据以及校验结果。 下一步，就是数据的更新，也就是将表单最新的值和校验相关的信息更新到视图上。...Antd Form 具有很好的灵活性，可以帮我们快速的实现表单需求，但是也存在一些问题，比如当表单中的任何一个组件值发生改变，触发 onCollect 数据收集、执行更新流程，都会调用 forceUpdate

2.6K20

看完这篇，你也能把 React Hooks 玩出花

该钩子接受两个参数，第一个参数为副作用需要执行的回调，生成的回调方法可以返回一个函数（将在组件卸载时运行）；第二个为该副作用监听的状态数组，当对应状态发生变动时会执行副作用，如果第二个参数为空，那么在每一个...componentDidUpdate：该生命周期在每次页面更新后都会被调用。那么按照之前的逻辑，就应该把所有的状态全部放在第二个状态中，但是这样的话新增/删除一个状态都需要改变第二参数。...其实，如果第二个参数为空，那么在每一个 State 变化时都会执行该副作用，那么如果要实现 componentDidUpdate 就非常简单了。...另外，当我们将使用 useState 创建的状态赋值给 useRef 用作初始化时，手动更改 Ref 的值并不会引起关联状态的变动。...前面我们说过了当状态发生变化时，没有设置关联状态的 useEffect 会全部执行。同样的，通过计算出来的值或者引入的组件也会重新计算/挂载一遍，即使与其关联的状态没有发生任何变化。

3.4K31
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券