更新反应上下文的正确方法

Question

我正在使用 Gatsby 和布局插件，以便我的导航栏可以保持不变，而它下面的页面内容会发生变化。这样做的原因是我希望在页面更改时运行一些动画，所以我不希望导航栏重新加载中间动画。我让它工作到一个基本的水平，但是动画每次都从同一个点跳回开始，而不是从当前状态过渡到下一个状态。我意识到这是因为我需要在删除前一个类之前添加下一个类，但是我将自己与上下文 api 联系在一起以尝试实现这一点。你可以在这个沙盒中看到我的意思：https://codesandbox.io/s/ancient-cookies-tmb5b 问题在于将正确的类应用到组件/TopNav 中的这个 div：

<div className={`menuBarIcons ${this.props.data.prevPage} ${this.props.data.curPage}`}>

这取决于能否使用上一页和当前页更新 components/Context.js。当前页面部分正在工作，正如您从各个页面（和动画）上的文本输出中看到的那样，但是为了获取上一页，我尝试从上一页的 componentWillUnmount 中使用 prevState 并且没有运气。我觉得我的方法变得过于复杂了；任何指向解决方案的指针都非常感谢。

Answer 1

您需要使用gatsby-browser.js 将根元素与上下文提供程序一起包装。见https://www.gatsbyjs.org/blog/2019-01-31-using-react-context-api-with-gatsby/

// gatsby-browser.js

import React from "react"
import { ThemeProvider } from "./src/context/ThemeContext"

export const wrapRootElement = ({ element }) => (
  <ThemeProvider>{element}</ThemeProvider>
)