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

问题描述

我写了一些代码:

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

我遇到错误:

这是什么意思?

推荐答案

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

请记住，当您在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(组件的构造函数).这是正确的用法.在第二个示例中，我们传递的是的 instance .这是不正确的，并且将在运行时失败，并显示诸如对象不是函数"之类的错误.

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

是因为它期望的 instance .您想要一个为React.Component使用构造函数的函数:

is that it's expecting an instance of React.Component. What you want 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元素类型'...'没有任何构造或调用签名"是什么意思?意思是?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！