时间戳

首页 > 解决方案 > 如何在 Gatsby 中设置页面上方的状态

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

问题描述

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

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

谢谢

标签： reactjsreact-routergatsby

解决方案

您可以使用wrapPageElement或wrapRootElementapi in gatsby-browser.jsandgatsby-ssr.js来实现这一点。

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

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

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

推荐阅读