Question

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

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

这取决于能否使用上一页和当前页面来更新component / Context.js。从相应页面（和动画）的文本输出中可以看到，当前页面部分正在工作，但是要获得上一页，我尝试使用prevState并且没有运气，从上一页的componentWillUnmount中尝试过。我感到我的方法变得过于复杂。任何指向解决方案的指针都值得赞赏。

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>
)

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

1 个答案: