Typescript 在 React 功能组件（React.FC<props> ) 错误的道具是作为道具发送的吗？</props>

Question

I am trying to send a functional component with some props to another component and in the receiving component trying to type check that component for some of the props. Here is the code:

// BaseButton.tsx

export type ButtonProps = {
  label: string
  size?: 'sm' | 'md' | 'lg' | 'normal'
  icon?: React.FC<{ size?: number; foo: string }>
} & React.ButtonHTMLAttributes<HTMLButtonElement

export const BaseButton: React.FC<ButtonProps> = props => {/* ...return the button component */}

// Icon.tsx

type Props = {
  style?: React.CSSProperties
  size?: number
}

export const Icon: React.FC<Props> = ({ style, size = 24 }) => {/* ... return Icon component */}

// where I render the component

<BaseButton icon={Icon} label="Sign in" />
//                ^^^ I am expecting Typescript to complain

Since the icon?: React.FC<{ size?: number; foo: string }> icon?: React.FC<{ size?: number; foo: string }> in ButtonProps has an extra prop foo I am expecting Typescript to complain about it. But it is not.

EDIT:

This will throw an error while trying to invoke it with JSX syntax:

icon?: React.FC<{ size?: number; foo: string }>

const {icon: Icon} = props
<Icon />

Instead, the type should be:

icon?: React.ComponentType<{ bar: number }>

Answer 1

Basically, you can assign functions with fewer parameters to functions with more parameters :

let fn1 = (props: { size: number }) => 42
let fn2 = (props: { size: number; foo: string }) => 42

fn2 = fn1  // this works
fn1 = fn2 // error

Or in other words:

With a variable let fn2 and type (props: { size: number; foo: string }) => number given, a client needs to call it with two props size and foo . We now can assign fn2 = fn1 , as it is OK for the underlying implementation fn1 to ignore some of the input props and only deal with size .

Carried over to your case:

Icon with type React.FC<{ style?: React.CSSProperties; size?: number}> React.FC<{ style?: React.CSSProperties; size?: number}> is assignable to the ButtonProps icon property with type React.FC<{ size?: number; foo: string }> React.FC<{ size?: number; foo: string }> .

let fc1: React.FC<{
  style?: React.CSSProperties
  size?: number
}> = // ...
let fc2: React.FC<{ size?: number; foo: string }> = // ...

fc2 = fc1 // works
fc1 = fc2 // error

Playground

Answer 2

The type FunctionComponent has function type definition, so you can pass either a React component or a function to be invoked later.

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement | null; <--- Here
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

Here's a sandbox with an example of invoking the props.icon component from the BaseButton component. You'll see how the props foo and size must be passed when calling the function on line 21.

https://codesandbox.io/s/trusting-banach-prwos?file=/src/App.tsx

https://www.typescriptlang.org/docs/handbook/interfaces.html#function-types