在具有高阶函数的NextJS中使用持久布局

Question

我在下一个使用持久布局时使用亚当·瓦桑方法。有没有办法让他们与高阶函数一起工作？我不太清楚霍夫是怎么工作的。

我的_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布局很好，否则我得到：

错误:对象作为React子对象无效(找到:带有键{子类}的对象)。如果您打算呈现一个子集合，请使用数组代替。

Answer 1

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

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

const HomeWithAuth = withAuthUser()(Home)

HomeWithAuth.layout = BaseLayout;

export default HomeWithAuth

另外，确保在页面组件中使用相同的变量名(相同的大小写，例如layout和Layout)，以及在_app中引用它。