ant-design 🌈:底层组件分析

2,869 阅读2分钟

我们知道 ant-design 的组件是分为两层的,ant-design 是在 react-component 组件的基础上封装起来的。接下我们就来看看 ant-design 组件底层是如何封装。学习别人封装,方便自我理解底层, 知其然知其所以然。

react-component 涉及的底层组件

虽然地址直到所有,但是还是要盘点有哪些组件被封装了。

  • 容器
    • rc-drawer 抽屉容器
    • rmc-drawer 移动端抽屉
    • rc-dropdown 下拉容器
    • rc-footer 脚步容器
    • rc-menu 菜单容器
  • 表单
    • async-validator 是表单的验证器
    • rc-field-form 字段表单
    • rc-form 表单
  • 对齐
    • dom-align 灵活地将源html元素与目标html元素对齐。
    • rc-align react对齐组件,基于 dom-align
  • 动画
    • rc-animate
    • rc-banner-anim
    • rc-tween-one
  • 日历
    • rc-calendar 日历
    • rmc-calendar 移动端日历
  • 级联器
    • rc-cascader
  • 多选
    • rc-checkbox
  • 折叠
    • rc-collapse
  • 选择器
    • rc-color-picker 颜色选择器
    • rc-picker 选择器
    • rmc-picker 移动端渲染器
    • rc-time-picker 时间选择器
    • rmc-date-picker 移动端日期选择器
  • 裁剪器
    • rc-cropping
  • 反馈 action
    • rc-dialog 对话反馈
    • rmc-dialog 移动端对话框
    • rc-notification 通知反馈
    • rc-tooltip 提示工具
  • 手势
    • rc-gesture
    • rmc-pull-to-refresh 下来刷新
  • 媒体
    • rc-image 图片媒体
  • 输入
    • rc-input-number 数量输入器
    • rmc-input-number 移动端数量输入器
    • rc-progress 进度条
    • rc-slider 滑动数据
    • rc-steps 步骤
  • 提交
    • rc-mentions 提及
  • 分页
    • rc-pagination 分页
  • 响应式
    • rc-resize-observer
  • 选择
    • rc-select
  • swipeout
    • rc-swipeout
  • 切换
    • rc-switch
  • 表格
    • rc-table
  • tabs 切换
    • rc-tabs
    • rmc-tabs 移动端切换
  • texty
    • rc-texty
  • touchable
    • rc-touchable 可触摸
  • 树型数据结构
    • rc-tree
    • rc-tree-select
  • 触发
    • rc-trigger
  • 上传
    • rc-upload
  • 工具函数
    • rc-util
  • 虚拟列表
    • rc-virtual-list
    • rmc-list-view 移动端列表