我写了一些代码：
function renderGreeting(Elem: React.Component<any, any>) {
return <span>Hello, <Elem />!</span>;
}
我收到一个错误：
JSX 元素类型
Elem没有任何构造或调用签名
这是什么意思？
错误“JSX 元素类型 '...' 没有任何构造或调用签名”是什么意思？
IT技术
reactjs
typescript
2021-04-21 03:00:59
6个回答
这是构造函数和实例之间的混淆。
请记住，当您在 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>;
}
如果要将组件类作为参数（相对于实例），请使用React.ComponentClass：
function renderGreeting(Elem: React.ComponentClass<any>) {
return <span>Hello, <Elem />!</span>;
}
当我从 JSX 转换到 TSX 并且我们将一些库保留为 js/jsx 并将其他库转换为 ts/tsx 我几乎总是忘记更改 TSX\TS 文件中的 js/jsx 导入语句
import * as ComponentName from "ComponentName";
到
import ComponentName from "ComponentName";
如果从 TSX 调用旧的 JSX (React.createClass) 样式组件，则使用
var ComponentName = require("ComponentName")
以下对我有用：https : //github.com/microsoft/TypeScript/issues/28631#issuecomment-472606019我通过执行以下操作来修复它：
const Component = (isFoo ? FooComponent : BarComponent) as React.ElementType
如果您将功能组件作为props传递给另一个组件，请使用以下内容：
import React from 'react';
type RenderGreetingProps = {
element: React.FunctionComponent<any>
};
function RenderGreeting(props: RenderGreetingProps) {
const {element: Element} = props;
return <span>Hello, <Element />!</span>;
}
其它你可能感兴趣的问题