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

Question

我写了一些代码：

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

我收到一个错误：

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

这是什么意思？

Answer 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>;
}