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

我写了一些代码：

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

函数renderGreeting（元素：React.Component）{
回复你好！；
}

我得到一个错误：

JSX元素类型

Elem

没有任何构造或调用签名

---

这是什么意思？

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

请记住，在React中编写组件时：

class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}

它需要一个

React.Component

的实例。您需要的是一个函数，它为

React.Component

接受构造函数：

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

函数renderGreeting（Elem:new（）=>React.Component）{
回复你好！；
}

或类似地：

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

函数renderGreeting（Elem:typeof React.Component）{
回复你好！；
}

如果要将组件类作为参数（相对于实例），请使用

React.ComponentClass

：

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

函数renderGreeting（元素：React.ComponentClass）{
回复你好！；
}

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

import*作为“ComponentName”中的ComponentName

到

从“ComponentName”导入ComponentName

如果从TSX调用旧的JSX（React.createClass）样式的组件，那么使用

var ComponentName=require（“ComponentName”）
如果您使用的是材料ui，请转到组件的类型定义，该定义由TypeScript加下划线。你很可能会看到这样的情况

export { default } from './ComponentName';

您有2个选项来解决此错误：

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

import ComponentName from './ComponentName'

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

从“./ComponentName”导入组件名
常量组件=（）=>

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

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

const Component = () => <ComponentName />

import{default as ComponentName}来自“./ComponentName”
常量组件=（）=>

这样，您就不需要每次使用组件时都指定
.default
。
如果您真的不关心道具，那么最广泛的类型是
React.ReactType

这将允许以字符串形式传递本机dom元素<代码>反应。反应类型
涵盖所有这些：

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

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

一些js组件.d.ts
文件：

import * as React from "react";

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

声明React类组件时，请使用
React.ComponentClass
而不是
React.component
，然后它将修复ts错误。
在我的示例中，我将
React.React.Node
用作功能组件的类型，而不是
React.FC
类型

确切地说，在本部分中：


导出常量属性列表：React.FC=（道具：any）=>{
常量列表：字符串[]=[
“Consequat Phasellus sollicitudin.”，
“Consequat Phasellus sollicitudin.”，
'...'
]
返回(
{listItem}
}
/>
)
}

以下几点对我很有用：我通过这样做来修复它：

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

---

正如@Jthorpe所提到的，

ComponentClass

只允许

Component

或

PureComponent

但不允许

FunctionComponent

如果试图传递

函数组件

，typescript将抛出类似于

Type'（props:myProps）=>Element'提供的签名与'new（props:myProps，context？：any）：Component'不匹配。

但是，通过使用

ComponentType

而不是

ComponentClass

可以同时考虑这两种情况。根据react声明文件，类型定义为

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

type ComponentType=ComponentClass | FunctionComponent

您可以使用

函数renderGreeting（props:{Elem:React.Component}）{
返回Hello，{props.Elem}！；
}

但是，以下方法是否有效

函数renderGreeting（元素：React.ComponentType）{
常量propsToPass={1:1，2:2}；
回复你好！；
}

在导出组件之前，我通过使用类型断言解决了这个问题。TypeScript在使用redux“compose”编写后无法识别，因此我将道具类型分为IParentProps和IProps，并在执行类型断言时使用IParentProps

从'react redux'导入{compose}
从“HOCs/HOC1”导入HOC1
从“HOCs/HOC2”导入HOC2
键入IParentProps={}
类型IProps={}
常量组件：React.FC=React.memo（（道具）=>{
返回
})
将合成（HOC1、HOC2）（组件）返回为React.FunctionComponent

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

import React from 'react';

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

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

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

从“React”导入React；
类型RenderGreetingProps={
元素：React.FunctionComponent
};
函数RenderGreeting（道具：RenderGreetingProps）{
常量{element:element}=props；
回复你好！；
}

这是我搜索错误时的第一个结果，因此我想在我的特殊情况下分享解决方案：

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

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

从“/shapes/Arc”导出{default as Arc}；

我导入错误，导致错误：

从“@visx/shape”导入圆弧；

它应该是什么

从“@visx/shape”导入{Arc}”；

我想你的意思是相反的？如果将TypeScript（即在

tsconfig.json

中）配置为

allowSyntheticDefaultImports

，则不需要更改inport语句。请参阅：这里的讨论：在撰写本文时，如果您正在使用

@types/react

它们，那么最容易使用

函数RenderGreeting（Elem:react.ComponentType）{…}

只是好奇，我们如何在ES6中编写

函数RenderGreeting（Elem:typeof react.Component）

，谢谢

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

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

import { compose } from 'react-redux'
import HOC1 from 'HOCs/HOC1'
import HOC2 from 'HOCs/HOC2'

type IParentProps = {}
type IProps = {}

const Component: React.FC<IProps & IParentProps> = React.memo((props) => {

      return <SomeComponent {...props}/>

})

return compose(HOC1,HOC2)(Component) as React.FunctionComponent<IParentProps>

import React from 'react';

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

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

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