javascript - TS2604: JSX elemy タイプ '' には、構造または呼び出しシグネチャがありません

Question

遅延読み込みコンポーネントのローダーで作業したところ、エラーが発生しました

TS2604: JSX elemy タイプ 'LoadedAsyncComponent' には、構造または呼び出しシグネチャがありません

最近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')