antd源码阅读Select组件

619 阅读2分钟
概述

本文主要是和大家学习antd的select组件是怎么写的。

antd的Select组件

image.png 先上了一张图片,antd的Select组件直接就是在RcSelect上面再次简单的封装了一下,我们还是先简单的阅读一下这100多行代码

image.png

我看见好多处地方都有使用Omit,Omit的本意是省略,属于Ts中的泛型函数,Omit的作用是忽略对象的某些属性功能 它的作用主要是:以一个类型为基础支持剔除某些属性,然后返回一个新类型。更多泛型函数学习

type Person = {
    name: string;
    age: string;
    location: string;
};

type PersonWithoutLocation = Omit<Person, 'location'>;

type QuantumPerson = {
    name: string;
    age: string;
};

image.png React.useContext(ConfigContext) 是 React Hook 的用法,用于在函数组件中获取上下文信息。

ConfigContext 是一个 React 上下文对象,它用来在应用程序的不同部分中传递配置信息。上下文对象是一个包含所有应用程序共享的数据的对象,可以在组件树的中的任何地方访问它。

在 ConfigContext 中定义的上下文数据可以在应用程序的任何地方使用,只需要通过 React.useContext(ConfigContext) 来获取上下文对象,然后从该对象中获取需要的数据。

具体来说,当你在组件中使用 React.useContext(ConfigContext) 时,React 会检查该组件的祖先组件,直到找到一个提供该上下文对象的组件,然后返回该组件提供的上下文数据。

这种上下文机制使得数据在组件之间进行传递变得更加方便和可控,同时也可以避免在组件之间重复传递数据。

结尾

下一章我们将深入RcSelect组件,看看我们的Select组件的核心