一、认识Card
卡片组件，偏展示型组件，看它的props：
- actions： 操作区，位于卡片底部
- cover： 卡片封面
- activeTabKey、defaultActiveTabKey、tabList、onTabChange： 页签
- extra： 右上角操作区
- ... 其他主要是一些样式的配置 tabProps是用来干嘛的呢？等会看源码见分晓 再看看它的子组件
- Card.Grid 网格
- Card.Meta 图片描述等
二、找到源码
地址：github.com/ant-design/…
版本：4.8.3
目录path： ant-design/components/card/
所有的组件都放在components目录下，我们使用的时候可以按需引入。
里面文件看名识义，有测试、使用demo、样式、子组件、组件定义、说明
语言是typescript哦
三、认识组件依赖
组件源码核心代码: ant-design/components/card/index.tsx
omit.js
function omit(obj, fields) {
// eslint-disable-next-line prefer-object-spread
const shallowCopy = Object.assign({}, obj);
for (let i = 0; i < fields.length; i += 1) {
const key = fields[i];
delete shallowCopy[key];
}
return shallowCopy;
}
export default omit;
代码很简单，功能就是得到剔除了一些指定属性的对象
ConfigContext
通过React.createContext创建的一个Context对象
Omit
export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
keyof: 取出所有属性
Exclude: 就是将前面类型与后面类型对比，过滤出前面独有的属性
Pick: 从前面类型取出后面类型的一系列属性
整体理解，Omit，第二个参数必须是第一个参数的部分属性，Omit<T, K extends keyof T>得到的值是：剔除掉部分属性K的T对象
SizeContext
通过React.createContext创建的一个Context对象,主要用于Card组件props中size相关的
Card组件还引用了一些antd的其他组件：Tabs、Row、Col
四、组件源码
类型定义:
组件比较简单，主要是根据props渲染各区域。
看了源码就知道，tabProps就是Tabs组件的props的类型定义，Card组件可以让用户自由配置Tabs
五、子组件Grid
包了一层ConfigConsumer，用来接收父组件通过ConfigContext传递的getPrefixCls。这里没有用Provider，而是直接设置createContext的初始值并使用。
六、子组件Meta
同Grid，不过Meta要渲染的元素更多一些
至此，Card组件我们已经学习完，但本人有一些疑问点：
-
HTMLDivElement可以设置同名属性（addEventListener、removeEventListener）？ -
HTMLDivElement继承自HTMElement，父接口已有的属性为啥子接口还要定义一遍？ -
export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> 为啥要剔除title
接口尽管支持继承多个接口，但是如果继承的接口中，定义的同名属性的类型不同的话，是不能编译通过的。
const divProps = omit(others, ['onTabChange']); 为啥要剔除onTabChange欢迎回复~~~~~~~~~~~~~~
