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对象

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
    私信