javascript - Gatsby 中 Context Provider 放在哪里？

Question

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

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>
  

• 在Layout中(或者每次都会执行):

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

我想我需要一个根 <app>对象包围在我的上下文提供者中，但是用 Gatsby 实现它的干净方法是什么？

我应该把我的 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>;

总结:

• 您将 Context Provider 放在根布局中。

引用资料:

• 我问了相关问题here和 here .我在此答案中提供的代码是您和我的问题的解决方案。如果您的整个应用程序都需要此信息，那么从 React Redux 等框架改编而来的良好编码做法是使用上下文提供程序包装您的整个应用程序。
• blog post提到@Lionel T。