如何在盖茨比页面上方设置状态

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或样式组件主题，则可以使用此api包装其Provider组件。

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