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

Question

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

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} />
                    )
                })}
            </>
        )
    }
}

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

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

Answer 1

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

您问题中的特定错误是由于通用 C 造成的，它是 this.Components 中每个组件的类型。您已经说过 C 实际上可以是任何东西，因此它不必是有效的可调用组件。这就是您收到“JSX 元素类型 'Component' 没有任何构造或调用签名”错误的原因。摆脱 C 并使您的组件成为 React.ComponentType 类型。这确保它们可以通过 JSX 调用。

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

JSX element does not have construct or call signatures

typescript

tsc

reactjs