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

Posted 2023-03-13

【中文标题】JSX 元素类型“...”没有任何构造或调用签名

【英文标题】：JSX element type '...' does not have any construct or call signatures

【发布时间】：2021-11-30 14:42:41

【问题描述】：

我有一个关于输入 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)

不知道如何解决这个问题

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

【问题讨论】：

什么是</Parent/Child>？不应该是</Parent.Child>吗？

已修复，谢谢....

【参考方案1】：

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

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

【讨论】：

非常感谢！！我是不是修复起来比那更复杂！ :D ...再次感谢！