标签: antd

TreeSelect 组件

基于 rc-select 中的 generate(options) 提供下拉框处理逻辑,rc-tree-select 实现了自己的 OptionList、Selector 组件以及 internalProps 处理函数。

Select 组件

Select 组件基于 rc-select 组装外观,主要功能包含: 多种展示模式:默认的单选模式、multiple 多选模式、tags 标签模式(支持随意输入值)、combobox 。 搜索功能:通过 props.showSearch、props.onSearch、props.optionFilterProp 配置搜索过滤能力。 选项分组:通过 OptGroup 组件设置选项分组。 扩展菜单:

react 工程中使用 ts

常规React.ReactNode:children 类型。React.CSSProperties:样式类型。React.MouseEvent<HTMLElement, MouseEvent> 等:event 对象类型。React.ChangeEventHandler 等:事件处理器。React.Ref:ref 引用类型,通常需要结合 React.useRef(null)。 使用 Om

Upload 组件

Upload 组件构成如下: rc-upload 提供基本的文件上传功能。Upload 组件在 rc-upload 基础上创建外观,实现文件与表单交互,并集成 UploadList 文件列表。 rc-uploadrc-upload 的实现逻辑基于:由隐藏的 input 元素获取上传文件,再通过 ajax 上传 FormData 数据。上传时包含常规的 ajax 功能点以及 input 表单控件的功

Menu

antd 中的 Menu 组件用于绘制菜单栏,其实现基于 rc-menu。本文第一部分介绍菜单栏实现的整体结构;第二部分介绍 rc-menu;第三部分介绍 Menu 组件。 需要声明的是,本文使用 RcMenu 指代 rc-menu 输出的 Menu 组件或其实例,使用 Menu 指代 antd 输出的 Menu 组件或其实例、或抽象意义的菜单栏组件,余同。 整体结构在视图上,菜单栏分为水平布局和

Radio, Checkbox

antd 中的 Radio, Checkbox 组件均基于 rc-checkbox 实现。本文第一部分将介绍 rc-checkbox,余下两部分再介绍 Radio, Checkbox 组件。 rc-checkboxrc-checkbox 输出 Checkbox 组件。其处理逻辑较为简单,包含样式类转换、多余 props 剔除等。元素层级上,rc-checkbox 使用 span 包裹 input

Grid 栅格

antd 提供的 24 栅格系统由 Row, Col 组件实现。 Row栅格布局组件 Row 用于设定整行 row 内各组 col 的布局风格。当 props.type 为 ‘flex’ 时,意味着整行采用 flex 布局。在 flex 布局的基础上,props.justify 通过 justify-content 样式影响各 col 元素的水平排列方式;props.align 通过 align-

Layout 布局

antd 提供 Layout, Header, Sider, Content, Footer 组件用于划定页面布局。实现上,侧边栏 Sider 组件比较特殊,将在第一部分加以介绍;其余组件均将在第一部分加以介绍。 Layout布局容器 Layout, 顶部布局 Header, 内容部分 Content, 底部布局 Footer 在实现上大体相当:都是通过 generator(props) = Ba

antd-Input 组件

Input 组件Input 组件只关乎布局,其余均为常规处理。props.addonBefore 为前置标签,props.addonAfter 为后置标签,props.prefix 前缀图标,props.suffix 后缀图标。参看官方图例: Input 组件在 render 方法执行阶段将绘制出 input 原生组件。鉴于 react 的实现机制,对于 input 原生组件的处理,有受控组件和

antd-Form 组件

ant design 中的 Form 组件基于 rc-form 实现。本文第一部分将介绍 rc-form 库;第二部分再介绍 ant design 中的 Form 组件。 rc-form常规收集表单数据并作校验,只需以 store 实时记录表单数据,校验后重绘表单。这样的思路以业务代码为例,就是,以数据模型 model 集成数据处理操作,再通过 setState 将 model 中的实时数据注入组