reactjs - React.ComponentProps 的 React 语法问题

Question

只想问一个关于 React.ComponentProps 本身的问题。

还在学习语法，你们知道下面这段代码的意思吗

type Props = React.ComponentProps<typeof ComponmentA> & {
    someProp: string;
};

谢谢!

Answer 1

让我们分解一下。

第一个typeof - typeof 从常量推断类型。

比如

const foo = {
 a: "hello", 
 b: 999
}; 

type TypeofFoo = typeof foo; 

//type TypeofFoo = {
//    a: string;
//    b: number;
//}

所以对于 React 组件的类型:

const MyComponent = (props: {
    name: string
}) => {
    const {name} = props; 
    return <div>{name}</div>
}

type  TypeofMyComponent = typeof MyComponent; 
//type TypeofMyComponent = (props: {
//    name: string;
//}) => JSX.Element

我们可以看到，在这种情况下，React 组件的类型只是一个具有特定签名并返回 JSX.Element 的函数。

第二个 React.ComponentProps - 似乎只是提取 React 组件的 Prop 。所以:

type ComponentPropsOfTypeofMyComponent = ComponentProps<TypeofMyComponent>; 
//type ComponentPropsOfTypeofMyComponent = {
//    name: string;
//}

第三，& 语法只是创建一个 type intersection

例如:

type A = {
   name: string; 
}

type B = {
    age: number; 
}

type C = A & B; 
// type C = {
//   name: string; 
//   age: number; 
// }

长话短说 - 该代码所做的是说'嘿，无论 ComponentA 的 props 是什么形状 - 并向其添加 {someProps: string;}'。