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

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

这等价于上面选择的正确答案，因为:在JSX中使用<Elem />(也就是用尖括号将大写变量括起来)等效于使用new关键字调用JSX元素的构造函数。

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

export { default } from './ComponentName';

你有两个选项来解决这个错误:

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

import ComponentName from './ComponentName'

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

2.在导入时，将组件重命名为“default”:

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

const Component = () => <ComponentName />

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

当我从JSX转换到TSX时，我们保留了一些库作为js/ JSX，并将其他库转换为ts/ TSX，我几乎总是忘记更改TSX\ ts文件中的js/ JSX导入语句

import * as ComponentName(组件名);

to

import ComponentName from "ComponentName"

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

变量

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

我正在使用的库是这样的:

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

我导入错误，导致错误:

import Arc from "@visx/shape";

它应该是

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

如果你将功能组件作为道具传递给另一个组件，请使用以下命令:

import React from 'react';

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

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

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

如果你真的不关心道具，那么最广泛的可能类型是React.ElementType。

这将允许将原生dom元素作为字符串传递。反应。ElementType涵盖了所有这些:

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