惰性反应和HOC类型,类型“未知”不能分配给类型“ ComponentType <any>”

时间:2020-07-08 05:33:19

标签: reactjs typescript react-router react-hoc react-lazy-load

大家好,我是打字稿新手,我有些困惑,所以如果您能帮助我,我将不胜感激。

如下所示

我的家庭功能组件

import React from 'react'
import ComponentWrapper from "../../Hoc/ComponentWrapper";

const Home: React.FC = () => {
 return (
     <div>
         this is from Home
     </div>
 )
}

export default ComponentWrapper(Home);

我的个人

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import { ToastContainer } from "react-toastify";
import Loader from "../components/loader/Loader";
import { Dispatch } from 'redux'

interface OwnProps {
loader: boolean
}

interface StateFromProps {
base: OwnProps
}

interface DispatchFromProps {
// your dispatch type
}


const ComponentCover = (WrappedComponent: React.FC) => {
return class extends PureComponent<OwnProps> {
    /*------------------------------ state -------------------------------- */
    state = {
    //your state is here
    };
    /*------------------------------ life cycles -------------------------- */
    componentDidMount() {
    // your method for authentication
    }
    /*--------------------------------------------------------------------- */
    render() {
    const { loader } = this.props;
    return (
        <>
        {loader && loader && <Loader />}
        <ToastContainer closeButton={false} style={{ fontSize: "19px" }} />
        <div className="route-wrapper">
            <WrappedComponent {...this.props} />
        </div>
        </>
    );
    }
};
};

const mapDispatch = (dispatch: Dispatch) => ({
// your actions
});

const mapState = ({ base: { loader } }: StateFromProps) => ({
loader,
});

const ComponentWrapper = compose(
connect(mapState, mapDispatch),
ComponentCover
);

export default ComponentWrapper;

我反应懒惰的人

import { lazy } from "react";
/*----------------------------- lazy Loading -------------------------- */
const Login = lazy(() => import("../pages/login/Login"));
const Home = lazy(() => import("../pages/home/Home"));
const NotFoundPage = lazy(() => import("../pages/notFoundPage/NotFoundPage"));

const routePath = [
{
    exact: true,
    path: "/",
    component: Home,
},
{
    path: "/login",
    component: Login,
},
{
    exact: true,
    component: NotFoundPage,
},
];

export default routePath;

我遇到的错误是在反应惰性组件中,它是:

Type 'Promise<typeof import("F:/projects/sitesaz-panel/src/pages/login/Login")>' is not assignable to 
type 'Promise<{ default: ComponentType<any>; }>'.
Type 'typeof import("F:/projects/sitesaz-panel/src/pages/login/Login")' is not assignable to type '{ 
default: ComponentType<any>; }'.
Types of property 'default' are incompatible.
Type 'unknown' is not assignable to type 'ComponentType<any>'.
Type 'unknown' is not assignable to type 'FunctionComponent<any>'.

此错误后,我尝试强制将ComponentWrapper导出为React组件类型 但我遇到另一个错误,它在家庭组件中:

Not all constituents of type 'ComponentType<{}>' are callable.
Type 'ComponentClass<{}, any>' has no call signatures.

0 个答案:

没有答案