如何编写react hook HOC

Question

我得到了这样一个页面。我想用它来包装其他小组件，并把它们放在路由器。我的react路由器版本是5.0

import styled from 'styled-components'
import Footer from '../footer/Footer'
import Header from '../header/Header'
const PageWrap: any = ({ children }) => {
return (
<>
<Header />
<div className="other-small-comp">{children}</div>
<Footer />
</>
)
}
export default PageWrap

使用PageWrap函数，我希望能够在路由 中做类似的事情

import Account from './Account'
Import Login from './Login'
<Switch>
<PrivateRoute path={urls.account} exact component={PageWrap(Account)} />
<Route path={urls.login} exact component={Login} />
</Switch>

我怎么做PageWrap(Account)没有错误?

Answer 1

你所犯的错误是你的包装器是一个React组件，它把props作为参数，而不是一个函数，它把另一个组件作为参数。为了向您展示如何创建包装器，我将使用AirBnb样式指南示例:

export default function withFoo(WrappedComponent) {
function WithFoo(props) {
return <WrappedComponent {...props} foo />;
}
const wrappedComponentName = WrappedComponent.displayName
|| WrappedComponent.name
|| 'Component';
WithFoo.displayName = `withFoo(${wrappedComponentName})`;
return WithFoo;
}