在我的例子中，我在类型定义中缺少new。

some-js-component.d。ts文件:

import * as React from "react";

export default class SomeJSXComponent extends React.Component<any, any> {
    new (props: any, context?: any)
}

在tsx文件中，我试图导入非类型化组件:

import SomeJSXComponent from 'some-js-component'

const NewComp = ({ asdf }: NewProps) => <SomeJSXComponent withProps={asdf} />

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

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

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

我导入错误，导致错误:

import Arc from "@visx/shape";

它应该是

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

当声明React Class组件时，使用React。ComponentClass而不是React。组件，那么它将修复ts错误。

如果你正在使用一个功能组件，并传递一个组件作为道具，对我来说，解决方案是改变React。ReactNode to React。应用的

interface Props{
  GraphComp: React.ElementType
}

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

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

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

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

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

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

记住，当你在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构造函数的函数。组件:

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

或类似的:

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