reactjs - 错误 "JSX element type ' .. .' does not have any construct or call signatures"是什么意思？

Question

我写了一些代码:

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

我收到一个错误:

JSX element type Elem does not have any construct or call signatures

这是什么意思？

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