这似乎与基于类的组件一起工作,但是我想到了实现功能组件,这给了我错误,我尝试检查SO中的所有问题,但找不到正确的方法。我在这里可能缺少一些东西,需要帮助。
我的组件 BackendRootComponent
import React,{useEffect} from 'react'
import { HeaderComponent } from './layouts/HeaderComponent';
import { isMobile, isTablet } from 'react-device-detect';
export default function BackendRootComponent(BaseComponent){
useEffect(() => {
require('./sass/main.scss');
if(isMobile || isTablet) $("body").addClass("mobile-adjustment");
},[])
return(
<>
<HeaderComponent/>
<main className="content pt-3">
<BaseComponent/>
</main>
</>
)
}
ProtectedRoute.js
import React from 'react';
import {Redirect,Route} from 'react-router-dom';
import BackendRootComponent from '../backend/BackendRootComponent';
export default function ProtectedRoute ({component: Component,isAuthenticated, ...rest}) {
let AdminRootComp = BackendRootComponent(Component)
return (
<Route {...rest} render={(props) => isAuthenticated === true
? <AdminRootComp {...props}/>
: <Redirect to={
{
pathname: '/backend-admin/login',
state: {
from: props.location
}
}
} />
}
/>
)
}
RouterComponent.js
import React from 'react';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
import RootComponent from '../frontend/RootComponent';
import IndexComponent from '../frontend/components/IndexComponent';
import ContactComponent from '../frontend/components/ContactComponent';
import WorkComponent from '../frontend/components/WorkComponent';
import AboutComponent from '../frontend/components/AboutComponent';
import ErrorComponent from '../frontend/components/ErrorComponent';
import BlogComponent from '../frontend/components/BlogComponent';
/* backend components */
import BackendRootComponent from '../backend/BackendRootComponent';
import LoginComponent from '../backend/components/Auth/LoginComponent';
import RegisterComponent from '../backend/components/Auth/RegisterComponent';
import UpdateInfoFunctionComponent from '../backend/components/UpdateInfoFunctionComponent';
import UpdateHomeFunctionComponent from '../backend/components/UpdateHomeFunctionComponent';
import WorkIndexComponent from '../backend/presentation/WorkIndexComponent';
import UpdateWorkFunctionComponent from '../backend/components/UpdateWorkFunctionComponent';
import AddWorkFunctionComponent from '../backend/components/AddWorkFunctionComponent';
import BlogIndexComponent from '../backend/presentation/BlogIndexComponent';
import UpdateBlogFunctionComponent from '../backend/components/UpdateBlogFunctionComponent';
import AddBlogFunctionComponent from '../backend/components/AddBlogFunctionComponent';
import UpdateAboutFunctionComponent from '../backend/components/UpdateAboutFunctionComponent';
import MetaIndexComponent from '../backend/presentation/MetaIndexComponent';
import AddMetaFunctionComponent from '../backend/components/AddMetaFunctionComponent';
import UpdateMetaFunctionComponent from '../backend/components/UpdateMetaFunctionComponent';
import ProtectedRoute from './ProtectedRoute';
function RouterComponent() {
let appState = localStorage.getItem('appState')
let loggedIn = (appState) ? JSON.parse(appState).isLoggedIn : false;
return (
<Router basename={'/'}>
<Switch>
<Route path="/" exact component={(props) => RootComponent(IndexComponent,props)}/>
<Route path="/about" exact component={(props) => RootComponent(AboutComponent,props)}/>
<Route path="/work" exact component={(props) => RootComponent(WorkComponent,props)}/>
<Route path="/blog" exact component={(props) => RootComponent(BlogComponent,props)}/>
<Route path="/contact/:hire?" exact component={(props) => RootComponent(ContactComponent,props)}/>
{/* backend routes */}
{<ProtectedRoute isAuthenticated={loggedIn} path='/backend-admin/info' component={UpdateInfoFunctionComponent} />}
{/* <Route path="/backend-admin/info" exact component={(props) => BackendRootComponent(UpdateInfoFunctionComponent,props)}/> */}
<Route path="/backend-admin/home" exact component={(props) => BackendRootComponent(UpdateHomeFunctionComponent,props)}/>
<Route path="/backend-admin/about" exact component={(props) => BackendRootComponent(UpdateAboutFunctionComponent,props)}/>
<Route path="/backend-admin/work" exact component={(props) => BackendRootComponent(WorkIndexComponent,props)}/>
<Route path="/backend-admin/work/edit/:id" exact component={(props) => BackendRootComponent(UpdateWorkFunctionComponent,props)}/>
<Route path="/backend-admin/work/add" exact component={(props) => BackendRootComponent(AddWorkFunctionComponent,props)}/>
<Route path="/backend-admin/blog" exact component={(props) => BackendRootComponent(BlogIndexComponent,props)}/>
<Route path="/backend-admin/blog/edit/:id" exact component={(props) => BackendRootComponent(UpdateBlogFunctionComponent,props)}/>
<Route path="/backend-admin/blog/add" exact component={(props) => BackendRootComponent(AddBlogFunctionComponent,props)}/>
<Route path="/backend-admin/meta" exact component={(props) => BackendRootComponent(MetaIndexComponent,props)}/>
<Route path="/backend-admin/meta/edit/:id" exact component={(props) => BackendRootComponent(UpdateMetaFunctionComponent,props)}/>
<Route path="/backend-admin/meta/add" exact component={(props) => BackendRootComponent(AddMetaFunctionComponent,props)}/>
<Route path="/backend-admin/register" exact component={(props) => BackendRootComponent(RegisterComponent,props)}/>
<Route path="/backend-admin/login" exact component={(props) => BackendRootComponent(LoginComponent,props)}/>
<Route component={(props) => RootComponent(ErrorComponent,props)}/>
</Switch>
</Router>
);
}
export default RouterComponent;
如果我删除BackendRoot HOC,一切正常,但是有了HOC,我就会犯错。
答案 0 :(得分:1)
如果您需要将
BackendRootComponent
用作HOC,请尝试在其前面加上with
,并同时加入props
。
尝试以下实现:
import React,{useEffect} from 'react'
import { HeaderComponent } from './layouts/HeaderComponent';
import { isMobile, isTablet } from 'react-device-detect';
const withBackendRootComponent = BaseComponent => props => {
useEffect(() => {
require('./sass/main.scss');
if(isMobile || isTablet) $("body").addClass("mobile-adjustment");
},[])
return(
<>
<HeaderComponent/>
<main className="content pt-3">
<BaseComponent {...props} />
</main>
</>
)
}
请注意,React组件名称以大写字母开头。