JSX 元素类型“...”没有任何构造或调用签名

Question

我有一个关于输入 react 命名空间组件的新手问题

所以我有一个 MyButton 组件

type MyButtonProps{
 face?: string
}

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

我想在 Parent 组件中使用这个 MyButton 组件，但将其命名为 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>

但我不断收到此打字稿错误

JSX 元素类型“Parent.Child”没有任何构造或调用签名。 ts(2604)

不知道如何解决这个问题

谁能解释一下。提前谢谢你...

Answer 1

这是因为 Child 是可选的。您要么想让 Child 成为必需（Child?: -> Child:），要么在使用它之前检查它是否已声明（如果它不会总是被定义）：

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