首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ant Design 4.0 正式版来了!

你可以在页面中点击切换主题功能查看暗色主题效果: 64.gif 无边框组件 在业务,我们发现有些场景会存在轻量级选择组件。...在 v4 版本,Form 将自带表单实例,你可以直接通过 Form.Item name 属性进行数据绑定,从而简化你代码: - const { form } = this.props; - const...你可以通过我们提供 generate 方法生成自定义日期库 Picker 组件。为了保持兼容,默认 Picker 组件仍然使用 moment作为日期库。自定义日期库请参考此处[4]。...你现在可以单独选择开始或结束时间,并且完美优化了手动输入日期体验。 ?...://ant.design/changelog-cn [7] 该文档: https://ant.design/docs/react/migration-v4-cn [8] @saeedrahimi: https

3.2K30

react hook+ts+rouerV6 dev notes

const formRef: any = React.createRef() 挂载到form上(我组件是通过子组件传值过去) 传递给子组件  <RequestForm formRef={formRef...实现自定义上传(类似于element自定义上传文件) 关键api:customRequest 上代码: 首先是elementUI自定义上传代码(关注:http-request): 组件部分:        ...获取到redux仓库值(封装了thunk) 跟class写法一样(前提是封装thunk) 先引用: import { connect } from 'react-redux' 然后使用: function...10.一个Input动态样式,可以参考 图片 unclick: 图片 click: 图片 非常简单,想复杂了 11.antd-form 自定义校验 需求就是我们验证码组件需要校验 可以用到...form自定义检验(就是拿到formvalue和验证码 进行对比 然后抛错,挺方便)     <Form.Item             name={["user", "code"]}

2.4K10
您找到你想要的搜索结果了吗?
是的
没有找到

类型即正义:TypeScript 从入门到实践(序章)

TypeScript 版本 React 项目代码过程,在下一个小节我们将会结合 React 项目代码,真正开始 TypeScript 语法讲解。...React 前端工程师学习路线[12]一部分,欢迎来 Star 一波,鼓励我们继续创作出更好教程,持续更新~ 前提条件 确保你已经安装了 Node.js,可以访问官网安装:官网地址[13]。...在这篇教程讲解过程,我们将通过 Ant Design[17] 对应 React 组件库 antd[18] 来辅助我们项目的编写,使得我们可以专注于讲解 TS 核心知识,而不被繁杂界面语言所干扰...✌️ 安装依赖 好了,大致介绍了 antd 组件库及 Ant Design 周边之后,我们马上来写代码引入 antd,打开命令行,在其中输入如下命令: $ npm install antd 运行上面的命令安装完依赖之后就可以在项目中使用了...antd 组件库,并使用 react-app-rewired 替换默认 react-scripts 来完成对 CRA Webpack 配置进行修改,以是我们可以获得 antd 组件按需引用和主题定制功能

1.5K20

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...React.forwardRef api, 把当前ref暴露给子组件,在Form lib中导出前 Form/index文件可以看见包裹

1.9K20

前端React集成websocket

React集成websocekt需要安装socket.io,安装完成后,将连接过程定义为一个模块,sicket.io会导出一个io函数,这个函数参数就是websocket连接地址和一些配置参数,其返回值是一个连接对象...在需要地方导入即可: import * as React from 'react'; import { Grid, Box, Card, Form } from '@alifd/next'; import...connect事件,然后监听其他自定义事件,这里监听其他自定义事件,理论上应该发生在connect之后,所以应该写在connect回调函数,但是我写在外面也没发生错误,就一直这样了,后面如果发现问题会及时更新...当组件卸载时,我们应该卸载所有的事件,所以我们在useEffect函数返回了一个函数,返回函数中就是卸载socket连接对象监听事件,如果卸载,页面卸载又重新加载,事件会被重复监听会对功能造成影响...以上便是我在react中使用websocket一点经验希望对你有所帮助。

2K20

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

在数栈过去产品迭代受限于当前组件版本,积累了很多待解决问题,随着新功能需求不断增加,很多原先组件以及交互设计需要进行优化。...兼容性问题 第三方依赖兼容问题 ・React - 最低 v16.9,部分组件使用 hooks 重构 ( react 升级相关文档:https://sourl.cn/6bM4Ep) ・Less - 最低...: ・报错文件 Icon 比较少情况,可以直接手动替换该文件 Icon 组件,具体替换成 Icon 哪个组件可以根据 type 在 Icon 文档找( Icon 文档:https://sourl.cn...通过这次 UI 升级和 antd 升级之后,Form 表单在数栈应用发生了较大变化,从老版本 label/component 横向排版改为了纵向改版,在横向空间情况下,使⽤上下结构能有效提...・模块复用 在新版 rc-select ,antd 官方抽取了一个 generator 方法。它主要接收一个 OptionList 自定义组件用于渲染下拉框部分。

4K30

React-hooks 父组件通过ref获取子组件数据和方法

我们知道,对于子组件或者节点,如果是class类,存在实例,可以通过 React.createRef() 挂载到节点或者组件上,然后通过 this 获取到该节点或组件。...render(){ return } } 但是在子组件是函数组件时候,因为函数组件没有实例,所以在正常情况下, ref 是不能挂载函数组件...useImperativeHandle useImperativeHandle:可以配合 forwardRef 自定义暴露给父组件实例值。...forwardRef 会创建一个 React 组件,这个组件能够将其接受 ref 属性转发到其组件树下另一个组件。...isDisable} val={formData.isRaiseMoney} ref={collectRef} handleChange={handleChangeAmount} /> // 然后就可以在父组件一些方法获取子组件暴露出来方法或值

1.9K30
领券