reactjs - 在 NextJS 中使用持久布局和高阶函数

Question

我正在使用Adam Wathan's在 Next 中使用持久布局的方法。有没有办法让他们使用高阶函数？我不太确定 HOF 是如何工作的。

我的_app.js

function MyApp({ Component, pageProps }) {

    const Layout = Component.layout || (children => <>{children}</>)

    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )
}

示例页面如下所示

const Home = () => {

    return (
        <>
        ...
        </>
    )
}

Home.Layout = BaseLayout;

export const getServerSideProps = withAuthUserTokenSSR()()

export default withAuthUser()(Home)

如果我删除 HOF，布局可以正常工作，否则我会得到:

Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead.

Answer 1

您需要将 layout 组件应用到高阶组件本身，因为它可能会包装您的原始 Home 组件并隐藏 Home.layout 离开。

const Home = () => {
    return (
        <></>
    )
}

const HomeWithAuth = withAuthUser()(Home)

HomeWithAuth.layout = BaseLayout;

export default HomeWithAuth

此外，请确保在页面组件中以及在 _app。