如何编写react hook

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

您正在犯的错误是，您的包装器是一个以props为参数的React组件，而不是一个以另一个组件为参数的函数。为了向您展示如何创建包装器，我将使用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;
}