我写了一些代码:
function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; }
我收到一个错误:
JSX元素类型Elem没有任何构造或调用签名
Elem
这是什么意思?
这是 构造函数 和 实例 之间的混淆。
请记住,在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。这是不正确的,并且将在运行时失败,并显示诸如“对象不是函数”之类的错误。
Greeter
此代码的问题
是它的预期的 情况下 的React.Component。你想要什么一个函数, 构造函数 为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>; }