如何为特定页面创建父组件（以便能够在父级中添加反应上下文）？

Posted 2023-04-14

【中文标题】如何为特定页面创建父组件（以便能够在父级中添加反应上下文）？

【英文标题】：How can I create a parent component for specific pages (to be able to add react context inside parent)?

【发布时间】：2021-11-23 11:00:15

【问题描述】：

我有一组特定的页面将使用特定的反应上下文。 我不想在 app.js 根文件中创建上下文，因为我只会在特定的页面集上使用该上下文。

我如何创建将包裹这些特定页面的父组件（包装器），然后在该父组件中添加上下文？

【参考方案1】：

您可以使用 HOC 概念来解决这个问题：

const Context = React.createContext( ... );

const withPageContext = (PageComponent) => 
    const Wrapper = (props) => 
        return (
            <Context.Provider value=...>
                <PageComponent ...props />
            </Context.Provider>
        )
    ;

    return hoistStatics(Wrapper, PageComponent, 
        // `getInitialProps` not in hoist static list, so we add it here to prevent override
        getInitialProps: true,
    )
;

然后它可以像这样在你的pages/* 中使用：

const MyPage = () => 
    const ctx = useContext(Context);
;

export default withPageContext(MyPage);

【讨论】：

现在例如我有一个页面，如何确保该页面可以使用该上下文？如果我只是在我的页面中将 包装在 return 方法中，我将无法在该文件中使用上下文，因为它仅可用于使用该 PageContext 包装的页面子组件。查看第二个容器中的代码，我试过了，但它可用于分页子组件，但我希望它在该文件中也可用。 ***.com/questions/69411744/…

@Denis2310 我明白了。使用 HOC 方法检查我编辑的答案

这就是我的想法，类似于 HOC 组件。但这实际上是什么？ return liftStatics(Wrapper, PageComponent, // getInitialProps 不在提升静态列表中，所以我们在这里添加它以防止覆盖 getInitialProps: true, )

如果没有这个，您的 HOC 将隐藏 Page 组件上的 static 属性。但这只有在您使用一些“旧”的 Next.js API 时才会发生。较新的 API 被直接导出（例如 export async function getStaticProps(context) ），这使得 HOC 阴影不再是问题。 nextjs.org/docs/basic-features/data-fetching