如下所示
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.