2

我在延迟加载组件的加载器上工作并遇到错误

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>;

moduleProviderprop 也是一个导入承诺：

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

1 回答 1

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>;

并更改从到LoadedAsyncComponent状态的类型，它现在对我有用......AsyncComponentReact.Component<any,any>React.ComponentClass

于 2018-02-03T09:02:54.857 回答