javascript - 在 Gatsby 中将Context Provider放在哪里？

我仅在第一次访问站点时才需要运行一些功能(例如，Office UI Fabric React的 initializeIcons() )和AXIOS调用(例如，使用Context API检索登录的用户)，然后将检索到的值存储在React Context中，并使它可用于整个应用程序。

Gatsby会将我页面的内容包装在布局中，例如:

const IndexPage = () =>
<Layout>
   Body of Index Page...
</Layout>

const AnotherPage = () =>
<Layout>
   Body of Another Page...
</Layout>

的布局像这样:

const Layout = ({ children }) =>
<>
    <Header />
    <main>{children}</main>
    <Footer />
</>

我知道在哪里可以而不是放置我的上下文:

网页周围的

(或在每次点击该页面时执行，其他页面也无法使用):

const IndexPage = () =>
<MyContextProvider>
    <Layout>
       Context Available here
    </Layout>
</MyContextProvider>

const AnotherPage = () =>
<Layout>
    Context NOT available here
</Layout>

布局中的

(或者每次都会执行):

const Layout = ({ children }) =>
<MyContextProvider>
    <Header />
    <main>{children}</main>
    <Footer />
</MyContextProvider>

我想我需要一个根<app>对象来包围我的上下文提供程序，但是用 Gatsby 实现这一目标的一种干净方法是什么？

我应该在哪里放置上下文提供程序？

最佳答案

您定义一个根布局。与常规布局相比，没有定义“可见”页面元素，但是在每个页面上都需要隐藏的东西，例如ContextProviders，React Helmet，主题等:
RootLayout.jsx:

export default function RootLayout({ children }) {
  return (
    <>
      <Helmet />
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <ContextProvider>
            {children}
          </ContextProvider>
        </ThemeProvider>
    </>
  );
}

Gatsby通过gatsby-browser.js和gatsby-ssr.js隐式调用此根布局，并将其应用于每个页面。 Gatsby只需这两行相同的代码即可为您完成其余的工作。
gatsby-browser.js:

export const wrapRootElement = ({ element }) => <RootLayout>{element}</RootLayout>;

gatsby-ssr.js:

export const wrapRootElement = ({ element }) => <RootLayout>{element}</RootLayout>;

摘要:

您将上下文提供程序放置在根目录中。

引用:

我问了相关问题here和here。我在此答案中提供的代码是您和我的问题的解决方案。如果您的整个应用程序都需要此信息，那么它是一种很好的编码惯例，可从React Redux等框架改编为使用Context Provider包装整个应用程序。

提到的blog post @LionelT。

关于javascript - 在 Gatsby 中将Context Provider放在哪里？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58063372/