JSX element type '...' does not have any construct or call signatures-CodePudding

I've got a newbie question about typescipting react namespace components

so i have a MyButton component

type MyButtonProps{
 face?: string
}

usage:
<MyButton face="smile">Smiling</MyButton>

and i want to use this MyButton component in Parent component but namespace it to Parent.Child

type ParentComponent<T = {}> = React.FC<T> & {
  Child?: React.FC<MyButtonProps>;
};

type ParentProps = {
 color: string;
}

const Parent: ParentComponent<ParentProps> = (props)=>{ ... };
Parent.Child = MyButton;

usage:
<Parent>
   <Parent.Child face="lol">Hello World!</Parent.Child>
</Parent>

But i keep getting this typescript error

JSX element type 'Parent.Child' does not have any construct or call signatures. ts(2604)

and not sure how to resolve this

Can someone shed some light. Thank you in advanced...

CodePudding user response：

It's because Child is optional. You either want to make Child required (Child?: -> Child:) or check to see if it's declared before using it (if it won't always be defined):

 {Parent.Child && <Parent.Child face="lol">Hello World!</Parent.Child>}