在盖茨比中将Context Provider放在哪里？

Question

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

Gatsby将我页面的内容包装在Layout中，例如：

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>对象来包围我的Context Provider，但是用盖茨比实现这一目标的一种干净方法是什么？

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

Answer 1

您定义一个根布局。与正常布局相比，没有定义“可见”的页面元素，但在每个页面上都需要隐藏的东西，如 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>;

概括：

• 您将上下文提供程序放在根布局中。

参考：

• 我在这里和这里问了相关的问题。我在此答案中提供的代码是您和我的问题的解决方案。如果您的整个应用程序需要此信息，那么从 React Redux 等框架改编而来的良好编码实践是使用 Context Provider 包装您的整个应用程序。
• 该博客文章@Lionel牛逼提及。