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
欢迎回复~~~~~~~~~~~~~~
hwjfqr
Ant Design
React.js
- 1127
-
JetTsang
JavaScript
React.js
Ant Design
- 1109
-
我不只是切图仔
React.js
Ant Design
- 361
-
_音魂不散_
React.js
Ant Design
- 6773
-
我不只是切图仔
React.js
Ant Design
- 192
-
Circle
Ant Design
React.js
- 5877
-
zxg_神说要有光
React.js
Ant Design
- 7823
-
karl_hg
Element
Ant Design
- 1.1w
-
萌萌哒草头将军
React.js
Ant Design
- 1281
-
hiisea
Ant Design
Vue.js
- 9943
-
饺子不放糖
JavaScript
Ant Design