如何在 Gatsby 中设置页面上方的状态

Question

考虑到Gatsby在组件文件添加到文件夹时会自动创建页面，我如何在页面上方创建一个高阶状态组件，以便我可以控制导航和其他通用通用组件的状态？

或者我们是否要在页面组件中创建单独的状态，即使这意味着重复？

谢谢

Answer 1

您可以在gatsby-browser.js 和gatsby-ssr.js 中使用wrapPageElement 或wrapRootElement api 来实现此目的。

• wrapPageElement 用于持久 UI 组件，即在页面更改期间不应卸载的组件。例如 gatsby 自己的layout plugin 使用这个 api 将整个页面内容包装在一个用户定义的 Layout 组件中（这曾经是 gatsby 1 中的默认行为）。

• wrapRootElement 用于数据提供者。比如你想use redux或者styled-component主题，你可以用这个api封装他们的Provider组件。

gatsby-browser.js 将仅在浏览器中运行，而gatsby-ssr.js 将在页面生成期间运行，因此您可能希望同时使用这两个 api。