Правильный способ обновления контекста реакции

Question

Я использую Gatsby и плагин макета, чтобы моя навигационная панель могла сохраняться, пока содержимое страницы под ней изменяется. Причина этого в том, что я хочу, чтобы некоторые анимации запускались при изменении страниц, поэтому я не хочу, чтобы панель навигации перезагружала середину анимации. У меня он работает на базовом уровне, однако анимация каждый раз возвращается назад, чтобы начать с одной и той же точки, вместо перехода от текущего состояния к следующему. Я понимаю, что это связано с тем, что мне нужно добавить следующий класс перед удалением предыдущего, но я связываю себя узлами с контекстным API, чтобы попытаться достичь этого. Вы можете понять, что я имею в виду, в этой песочнице: https://codesandbox.io/s/ancient-cookies-tmb5b Проблема заключается в применении правильных классов к этому div в компонентах /TopNav:

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

что зависит от возможности обновить компоненты /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>
)