小编典典

错误“ JSX元素类型'...'没有任何构造或调用签名”是什么意思?

reactjs

我写了一些代码:

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

我收到一个错误:

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

这是什么意思?


阅读 5462

收藏
2020-07-22

共1个答案

小编典典

这是 构造函数实例 之间的混淆。

请记住,在React中编写组件时:

class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}

您可以通过以下方式使用它:

return <Greeter whoToGreet='world' />;

不会 以这种方式使用它:

let Greet = new Greeter();
return <Greet whoToGreet='world' />;

在第一个示例中,我们传递了组件Greeter构造函数 。这是正确的用法。在第二个例子中,我们绕过一个 实例
Greeter。这是不正确的,并且将在运行时失败,并显示诸如“对象不是函数”之类的错误。


此代码的问题

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

是它的预期的 情况下React.Component。你想要什么一个函数, 构造函数React.Component

function renderGreeting(Elem: new() => React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

或类似的:

function renderGreeting(Elem: typeof React.Component) {
    return <span>Hello, <Elem />!</span>;
}
2020-07-22