我写了一些代码:
function renderGreeting(Elem: React.Component<any, any>) {
return <span>Hello, <Elem />!</span>;
}
我得到一个错误:
JSX元素类型Elem没有任何构造或调用签名
这是什么意思?
我写了一些代码:
function renderGreeting(Elem: React.Component<any, any>) {
return <span>Hello, <Elem />!</span>;
}
我得到一个错误:
JSX元素类型Elem没有任何构造或调用签名
这是什么意思?
当前回答
看起来现在有一个特殊的新TypeScript类型来解决这个问题:JSXElementConstructor。如果你让某人将构造函数传递给一个未知的ReactElement,而不是该ReactElement的实例,这是传递的正确类型。
const renderGreeting = (Elem: JSXElementConstructor<any>) => {
return <span>Hello, <Elem />!</span>;
}
这等价于上面选择的正确答案,因为:在JSX中使用<Elem />(也就是用尖括号将大写变量括起来)等效于使用new关键字调用JSX元素的构造函数。
其他回答
在我的例子中,我在类型定义中缺少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} />
如果你正在使用一个功能组件,并传递一个组件作为道具,对我来说,解决方案是改变React。ReactNode to React。应用的
interface Props{
GraphComp: React.ElementType
}
const GraphCard:React.FC<Props> = (props) => {
const { GraphComp } = props;
return (
<div> <GraphComp /> </div>
)
}
这是构造函数和实例之间的混淆。
记住,当你在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>;
}
我通过在导出组件之前使用Type Assertions来解决这个问题。TypeScript在使用redux 'compose'组合后无法识别,因此我将道具类型分为IParentProps和IProps,并在做类型断言时使用IParentProps
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>
如果你想把一个组件类作为参数(而不是一个实例),使用React。ComponentClass:
function renderGreeting(Elem: React.ComponentClass<any>) {
return <span>Hello, <Elem />!</span>;
}