JSX 元素没有构造或调用签名

如何解决JSX 元素没有构造或调用签名

创建一个 HOC 类来查看“子”类中设置的一堆组件。

import * as React from 'react';

export class Container<C = any,P = {}> extends React.Component {

    Components: C[]

    props: React.PropsWithChildren<P>

    render() {

        return (
            <>
                {this.Components.map((Component: C,index) => {

                    return (
                        <Component key={index} />
                    )
                })}
            </>
        )
    }
}

在父类中，我在 VSCode 中收到以下错误。

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

解决方法

这里有很多错误。我不明白这是一个 HOC 或者它是如何工作的，因为属性 this.Components 没有在任何地方设置。高阶组件是一个函数，它接受一个组件并返回一个组件。它可以是一个返回类的函数，但它本身不是一个类。

您问题中的特定错误是由于泛型 C 造成的，它是 this.Components 中每个组件的类型。您已经说过 C 可以是任何东西，因此它不必是有效的可调用组件。这就是为什么您会收到“JSX 元素类型‘组件’没有任何构造或调用签名”的错误消息。去掉 C 并使你的组件成为 React.ComponentType 类型。这确保它们可以通过 JSX 调用。