TS2604：JSX 元素类型“”没有任何构造或调用签名

Question

我在处理延迟加载组件的加载程序时遇到错误

TS2604: JSX elemy type 'LoadedAsyncComponent' does not have any construct or call signatures

我认为我写了一个糟糕的代码，因为我最近开始写 React + TypeScript 链

这是我的组件：

import * as React from 'react';

declare interface AsyncComponentProps {
    moduleProvider: Function;
}
declare interface AsyncComponenState {
    LoadedAsyncComponent?: (React.Component<any, any> | null);
}

export class AsyncComponent extends React.Component<AsyncComponentProps, AsyncComponenState> {
    private isLoaded: boolean = false;
    constructor(props: any) {
        super(props);
        this.state = {
            LoadedAsyncComponent: null
        };
    }
    componentWillMount() {
        if (!this.isLoaded) {
            this.isLoaded = true;
            this.props.moduleProvider().then((provideData: any) => {
                this.setState({LoadedAsyncComponent: provideData[Object.keys(provideData)[0]] as React.Component});
            });
        }
    }
    render() {
        const {LoadedAsyncComponent} = this.state;
        return LoadedAsyncComponent ? <LoadedAsyncComponent/> : <div className="page-loading">Loading data</div>;
    }
}

错误在这里：

return LoadedAsyncComponent ? <LoadedAsyncComponent/> : <div className="page-loading">Loading data</div>;

此外 moduleProvider prop 是一个导入承诺：

import(/* webpackChunkName: "home" */ './Home/Home')

Answer 1

当我更改该行时，我解决了这个问题：

return LoadedAsyncComponent ? <LoadedAsyncComponent/> : <div className="page-loading">Loading data</div>;

至：

return LoadedAsyncComponent ? React.createElement(LoadedAsyncComponent, {} as any) : <div className="page-loading">Loading data</div>;

并将处于 AsyncComponent 状态的 LoadedAsyncComponent 的类型从 React.Component<any,any> 更改为 React.ComponentClass 并且它现在对我有用...

TS2604：JSX 元素类型“”没有任何构造或调用签名

TS2604: JSX elemy type '' does not have any construct or call signatures

javascript

typescript

reactjs

react-tsx