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

Question

我写了一些代码:

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

我收到一个错误:

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

这是什么意思？

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

Answer 2

如果您使用功能组件并将组件作为 prop 传递，对我来说，解决方案是将React.ReactNode 更改为 React.ElementType

interface Props{
  GraphComp: React.ElementType
}

const GraphCard:React.FC<Props> = (props) => {
  const { GraphComp } = props;

  return (
   <div> <GraphComp /> </div>
  )
}

Answer 3

如果要将组件类作为参数(与实例对比),请使用React.ComponentClass:

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

Answer 4

当我从JSX转换为TSX并将一些库保存为js/jsx并将其他库转换为ts/tsx时,我几乎总是忘记更改TSX\TS文件中的js/jsx import语句

import * as ComponentName from "ComponentName";

至

import ComponentName from "ComponentName";

如果从TSX调用旧的JSX(React.createClass)样式组件,则使用

var ComponentName = require("ComponentName")

Answer 5

以下对我有用：https : //github.com/microsoft/TypeScript/issues/28631#issuecomment-472606019我通过执行以下操作来修复它：

const Component = (isFoo ? FooComponent : BarComponent) as React.ElementType

Answer 6

如果您将功能组件作为道具传递给另一个组件，请使用以下内容：

import React from 'react';

type RenderGreetingProps = {
  element: React.FunctionComponent<any>
};

function RenderGreeting(props: RenderGreetingProps) {
  const {element: Element} = props;

  return <span>Hello, <Element />!</span>;
}

Answer 7

看起来现在有一个特殊的新 TypeScript 类型来解决这个问题的需要：JSXElementConstructor。如果您让某人将构造函数传递给未知的 ReactElement 而不是该 ReactElement 的实例，那么这是要传递的正确类型。

const renderGreeting = (Elem: JSXElementConstructor<any>) => {
    return <span>Hello, <Elem />!</span>;
}

这相当于上面选择的正确答案，因为：<Elem />在 JSX 中使用（又名用尖括号包裹大写变量）相当于使用关键字调用 JSX 元素的构造函数new。

Answer 8

这是我搜索错误时的第一个结果，所以我想分享我的特定情况下的解决方案：

我正在使用的库如下所示：

export { default as Arc } from './shapes/Arc';

我错误地导入了它，这导致了错误：

import Arc from "@visx/shape";

应该是什么

import { Arc } from "@visx/shape";

Answer 9

如果您使用的是material-ui，请转到组件的类型定义，TypeScript 会为其添加下划线。你很可能会看到这样的东西

export { default } from './ComponentName';

您有 2 个选项可以解决该错误：

1..default在JSX中使用组件时添加：

import ComponentName from './ComponentName'

const Component = () => <ComponentName.default />

2. 导入时重命名导出为“默认”的组件：

import { default as ComponentName } from './ComponentName'

const Component = () => <ComponentName />

这样你就不需要.default每次使用组件时都指定。

Answer 10

如果你真的不关心道具那么最广泛的类型是React.ReactType.

这将允许将本机dom元素作为字符串传递.React.ReactType涵盖所有这些:

renderGreeting('button');
renderGreeting(() => 'Hello, World!');
renderGreeting(class Foo extends React.Component {
   render() {
      return 'Hello, World!'
   }
});

Answer 11

正如@Jthorpe 所暗示的，ComponentClass只允许Component或PureComponent不允许FunctionComponent.

如果您尝试传递 a FunctionComponent，打字稿将抛出类似于...

Type '(props: myProps) => Element' provides no match for the signature 'new (props: myProps, context?: any): Component<myProps, any, any>'.

但是，通过使用ComponentType而不是ComponentClass允许两种情况。根据反应声明文件，类型定义为...

type ComponentType<P = {}> = ComponentClass<P, any> | FunctionComponent<P>

Answer 12

在声明 React Class 组件时，使用React.ComponentClass 而不是React.Componentthen 将修复 ts 错误。