JSX 元素类型"App"没有任何构造或调用签名

Question

我正在将我的React应用程序重写为Typescript，并且在重写HOC时遇到问题。这是会话的 HOC 。以下是我的withSession.tsxHOC：

import React from 'react'
import { connect } from 'react-redux'
import { selectors } from 'redux/tokens'
import { Tokens } from 'redux/tokens/types'
import { SessionContext } from 'contexts/sessionContext'
const withSession = () => {
const WithSession = <T extends Tokens>(WrappedComponent: React.ComponentType<T>): React.FC<T & Tokens> => {
return ({accessToken, refreshToken, expiry, ...props}: Tokens) => {
return (
<SessionContext.Provider value={{accessToken, refreshToken, expiry}}>
<WrappedComponent {...props as T} />
</SessionContext.Provider>
)
}
}
const mapStateToProps = (state: any) => {
return {
tokens: selectors.tokens(state),
}
}
const withSessionConnected = connect<any, {}, any>(
mapStateToProps,
)(WithSession as any)
return withSessionConnected
}
export default withSession

我App.ts是这样的：

import withSession from 'hocs/withSession'
const App: React.FC<Props> = ({test}: Props) => {
return <div>This is my App</div>
}
export default withSession()(App)

谁能帮我弄清楚为什么它抱怨App没有任何构造或调用签名？提前感谢您的帮助！

Answer 1

这可能是由于App组件非显式导出为React.ComponentType或React.Element引起的。至少在处理 HOC 时，这在非常相似的情况下帮助了我。

import withSession from 'hocs/withSession'
const App: React.FC<Props> = ({test}: Props) => {
return <div>This is my App</div>
}
export default withSession()(App) as React.ComponentType