我写了一些代码:
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没有任何构造或调用签名
这是什么意思?
当前回答
import React from 'react';
function MyComponent (
WrappedComponent: React.FunctionComponent | React.ComponentClass
) {
return (
<Wrapper>
<WrappedComponent />
</Wrapper>
);
}
其他回答
如果你使用的是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。
正如@Jthorpe所提到的,ComponentClass只允许Component或PureComponent,而不允许FunctionComponent。
如果你试图传递一个FunctionComponent, typescript将抛出一个类似于…
Type '(props: myProps) => Element' provides no match for the signature 'new (props: myProps, context?: any): Component<myProps, any, any>'.
但是,通过使用ComponentType而不是ComponentClass,可以同时满足这两种情况。根据react声明文件,类型定义为…
type ComponentType<P = {}> = ComponentClass<P, any> | FunctionComponent<P>
如果你正在使用一个功能组件,并传递一个组件作为道具,对我来说,解决方案是改变React。ReactNode to React。应用的
interface Props{
GraphComp: React.ElementType
}
const GraphCard:React.FC<Props> = (props) => {
const { GraphComp } = props;
return (
<div> <GraphComp /> </div>
)
}
这是我搜索错误时的第一个结果,所以我想在我的特定情况下分享解决方案:
我正在使用的库是这样的:
export { default as Arc } from './shapes/Arc';
我导入错误,导致错误:
import Arc from "@visx/shape";
它应该是
import { Arc } from "@visx/shape";
我通过在导出组件之前使用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>