请问如何理解：React.ComponentProps<'button'>？

Question

请问如何理解：

React.ComponentProps<'button'>

鼠标移动到现实类型：

完全看不懂如下的信息：

type React.ComponentProps<T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = T extends React.JSXElementConstructor<infer P> ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : {}

Answer 1

React.ComponentProps

是一个泛型类型，它接受一个类型参数 T，该参数必须是

keyof JSX.IntrinsicElements 

或

React.JSXElementConstructor<any> 

的子类型。该类型用于提取 React 组件的 props。

然后，使用条件类型检查类型 T。如果 T 是

React.JSXElementConstructor<infer P> 

的子类型，则类型参数 P 被推断并返回。如果 T 是

keyof JSX.IntrinsicElements 

的子类型，则从

JSX.IntrinsicElements[T] 

返回相应的内置元素类型。如果这两个条件都不满足，则返回一个空对象 {}。

该类型对于为可以接受任何有效的 React 元素或内置 HTML 元素的组件定义 props 非常有用

对于：

React.ComponentProps<'button'>

<button> 是一个内置的 HTML 元素，因此它属于 keyof JSX.IntrinsicElements 的子类型。因此，JSX.IntrinsicElements['button'] 将返回 <button> 元素的类型定义。
因此，React.ComponentProps<'button'> 将返回 <button> 元素的 props 类型

Answer 2

组件其实是一个函数（或者class），如果你想要获得一个组件的 props interface，很多时候可以在组件相同文件夹找到。

但是有时候找不到怎么办，或者你想要针对原生html节点找到对应的props。

这个时候就可以通过 React.ComponentProps<typeof CustomComponent> 或者 React.ComponentProps<"button"> 来拿到对应组件的 props interface。