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

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，它现在对我有用...