我需要运行一些函数(例如Office UI Fabric React的initializeIcons()
)和AXIOS调用(例如使用Context API检索已登录用户),仅在网站首次访问时运行,然后将检索到的值存储在React Context中,并使其可用于整个应用程序。
Gatsby将我的页面内容包装在一个Layout中,如下所示:
const IndexPage = () =>
<Layout>
Body of Index Page...
</Layout>
const AnotherPage = () =>
<Layout>
Body of Another Page...
</Layout>
布局如下所示:Layout
const Layout = ({ children }) =>
<>
<Header />
<main>{children}</main>
<Footer />
</>
我知道我不能把我的 Context 放在哪里:
around the pages (or it will be executed everytime the page is hit, and also not available to the other pages):
const IndexPage = () => <MyContextProvider> <Layout> Context Available here </Layout> </MyContextProvider>
const AnotherPage = () => <Layout> Context NOT available here </Layout>
in the Layout (or it will be executed every time):
const Layout = ({ children }) => <MyContextProvider> <Header /> <main>{children}</main> <Footer /> </MyContextProvider>
我想我需要一个根<app>
对象来包含我的上下文提供者,但使用Gatsby有什么干净的方式实现呢?
我应该把我的上下文提供者放在哪里?