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

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

1 голос
/ 02 марта 2020

Я использую Gatsby и плагин макета, чтобы моя навигационная панель сохранялась, пока содержимое страницы под ней меняется. Причина этого в том, что я хочу, чтобы некоторые анимации запускались при изменении страниц, поэтому я не хочу, чтобы панель навигации перезагружала середину анимации. У меня это работает до базового уровня c, однако анимации возвращаются к началу каждый раз, начиная с одной и той же точки, вместо перехода от текущего состояния к следующему. Я понимаю, что это потому, что мне нужно добавить следующий класс, прежде чем удалять предыдущий, но я связываю себя узлами с контекстным 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 и не повезло. Я чувствую, что мой подход стал слишком сложным; Любые указатели на решение очень ценятся.

1 Ответ

1 голос
/ 02 марта 2020

Вам нужно использовать gatsby-browser.js, чтобы обернуть элемент root вашим провайдером контекста. См 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>
)
...