Gatsby 中 Context Provider 放在哪里？

Question

我需要运行一些功能（例如 Office UI Fabric React 的 initializeIcons()）和 AXIOS 调用（例如使用 Context [=53= 检索登录用户） ]) 仅在网站第一次被点击时，然后将检索到的值存储在 React 上下文中，并使其对整个应用程序可用。

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，但是用 Gatsby 实现它的干净方法是什么？

我应该把 Context Provider 放在哪里？

Answer 1

您定义了一个根布局。与正常布局相比，没有定义 "visible" 页面元素，但在每个页面上隐藏了您需要的东西，如 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 置于根布局中。

参考文献：

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

Answer 2

为了完整起见，Gatsby 提供（通过 gatsby-browser.js）到 运行一个函数一次 的 API 是：

onClientEntry

export const onClientEntry = () => {
    console.log("Browser started!")
    // Put here run-only-once functions 
}

onInitialClientRender

export const onInitialClientRender = () => {
    console.log("First rendering completed!")
    // Put here run-only-once functions which need rendered output
}

Gatsby 中 Context Provider 放在哪里？

Where to put Context Provider in Gatsby?

javascript

reactjs

axios

gatsby

react-context