1

嘿伙计们，我是打字稿的新手，我有点困惑，所以如果你能帮助我，我将不胜感激。

正如你在下面看到的

我家功能组件

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.
4

0 回答 0