错误“JSX 元素类型 '...' 没有任何构造或调用签名"是什么意思?意思? [英] What does the error "JSX element type '...' does not have any construct or call signatures" mean?

问题描述

我写了一些代码:

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

我收到一个错误:

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

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

什么意思?

推荐答案

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

请记住，当您在 React 中编写组件时:

Remember that when you write a component in 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 的实例.这是不正确的，并且会在运行时失败，并显示对象不是函数"之类的错误.

In the first example, we're passing around Greeter, the constructor function for our component. That's the correct usage. In the second example, we're passing around an instance of Greeter. That's incorrect, and will fail at runtime with an error like "Object is not a function".

这段代码的问题

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

是它期待一个 React.Component 的实例.你想要的是一个为 React.Component 接受构造函数的函数:

is that it's expecting an instance of React.Component. What you want is a function that takes a constructor for 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>;
}

这篇关于错误“JSX 元素类型 '...' 没有任何构造或调用签名"是什么意思?意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！