javascript - 请问如何理解：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 类型